Adding SyntaxHighlighter JS to blogspot

by Noman Muhammad

SyntaxHighlighter is a bunch of Javascript files to help a developer/coder to post code snippets to website/blog and have it look pretty. It supports multiple language and its very easy to use and deploy it. Download SyntaxHighlighter.
Now extract the contents of the package and upload the Scripts and Styles folder to any host or website which can be linked from the blogspot site.
To make it work, now we need to edit our blog's template and add the following code after the <!-- end outer-wrapper --> tag:


<link href='http://[HOST URL]/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://[HOST URL]/shCore.js'/>

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>

Now we need to add support for the languages we want. For example to add support for the language php and ruby we need to link to two files. shBrushPhp.js and shBrushRuby.js.
Another Interesting thing that Its not really needed to upload the code/files as those files are already hosted by google.code.
We can easily lined up to those files. So, the above code snippet with support for PHP and RUBY will be as below.

<link href='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shCore.js'/>

<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script<

<!--Support for php and ruby : -->
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushPhp.js'/>
<script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn-history/r57/trunk/Scripts/shBrushRuby.js'/>

Syntaxhighlighter supports pre and textarea tags, but it will not work automagically, we need to put our code into the <pre> or <textarea>.

To add some php code to our blog we to put our code as follows:
<pre name="code" class="php">
---- PHP code goes here ----
</pre>

Similarly for Ruby Code:
<pre name="code" class="ror">
---- RUBY code goes here ----
</pre>

See details on that page

One important notice from Overview of SyntaxHighlighter Trying to highlight 10kb worth of text will result in JavaScript being aborted because of long execution time.

This entry was posted on Wednesday, May 27, 2009 and is filed under . You can leave a response and follow any responses to this entry through the Subscribe to: Post Comments (Atom) .

0 comments