SyntaxHighlighter Ajax

(No Ratings Yet)

Loading ...

115 views

SyntaxHighlighter is a fully functional self-contained code syntax highlighter developed in JavaScript. To get an idea of what SyntaxHighlighter is capable of, have a look at the demo page.

The project was started in 2004 and since then has gained a lot of acceptance. Version 2.0 is the new page in history of the project representing a near complete rewrite, clean up, optimization, standard compliance and new features.

Public Wiki

This is a public wiki. Most pages are open for contributions. If you would like to expand documentation or see a mistake, please feel free to correct or add more information. All offendending IPs will be banned permamently.
Preparing the page
After you got the files extracted and placed in your project, you will need to link them from your pages. For the purpose of this demonstration it will be assumed that scripts/*.* was extracted and placed into /scripts folder and styles/*.* into /styles.

The first file that you should get out of the way is adding SyntaxHighlighter main and theme CSS files to the tag like so:

<head>
	...
	<link type="text/css" rel="stylesheet" href="/styles/shCore.css" />
	<link type="text/css" rel="stylesheet" href="/styles/shThemeDefault.css" />
</head>

After that you have to add shCore.js followed by all brushes that you want to use (full list of default brushes):

<script type="text/javascript" src="/scripts/shCore.js"></script>
<script type="text/javascript" src="/scripts/shBrushJScript.js"></script>
<script type="text/javascript" src="/scripts/shBrushBash.js"></script>
<script type="text/javascript" src="/scripts/shBrushCpp.js"></script>

The last thing is to add a call to SyntaxHighlighter.all() like so:

<script type="text/javascript">
	SyntaxHighlighter.all();
</script>

And all together it should look like this:

<html>
	<head>
		<link type="text/css" rel="stylesheet" href="/styles/shCore.css" />
		<link type="text/css" rel="stylesheet" href="/styles/shThemeDefault.css" />
		<script type="text/javascript" src="/scripts/shCore.js"></script>
		<script type="text/javascript" src="/scripts/shBrushJScript.js"></script>
		<script type="text/javascript" src="/scripts/shBrushBash.js"></script>
		<script type="text/javascript" src="/scripts/shBrushCpp.js"></script>
		<script type="text/javascript">
			SyntaxHighlighter.all();
		</script>
	</head>

	...
</html>

Adding code blocks

SyntaxHighlighter looks for

 tags which have specially formatted class attribute. The format of the attribute is the same as style. The only required parameter is brush (see configuration) which should be set to one of the brush aliases that you have loaded prior.

Here's a typical example: 
<pre class="brush: js">
	alert("Hello world");
</pre>

 Escaping XML tags
Because of the browser nature it is impossible to put left angle bracket "< " character unescaped. This character causes browsers to interpret the following text as XML tags which can completly break your highlighted block or even the whole page. Please make sure to replace all instance of < with < 
Demo:  http://alexgorbatchev.com/wiki/SyntaxHighlighter:Demo
Download:   http://alexgorbatchev.com/downloads/grab.php?name=sh
Source:  http://alexgorbatchev.com/wiki/SyntaxHighlighter

















Related Listings:
Scriptaculous Effect Script Script.aculo.us is a set of JavaScript libraries to enhance the...
Lighter.js – Syntax highlighting for MooTools  Lighter.js is a free syntax highlighting class developed with...
AJAX image gallery Script Pyxy-gallery is an AJAX image gallery in PHP and JavaScript,...
Form With Style – Ajax Script Forms are not very friendly when it comes to CSS...
Lighter.js – Syntax highlighting for MooTools Lighter.js is a free syntax highlighting class developed with MooTools....



Do you like this post?





Email:     






Tags: ajax , Angle Bracket , Brushes , Code Blocks , Compliance , Css Files , Demo Page , Demonstration , Hello World , Ips , Js , Lt , Mistake , New Features , Optimization , Rewrite , Scripts , Syntax , Typical Example , Xml Tags

No Comments »

No comments yet.

RSS feed for comments on this post. TrackBack URL

SyntaxHighlighter Ajax

Do you like this post?

No Comments »

Leave a comment