tech_log: Code Syntax Highlighting on Blogger

Saturday, November 1, 2008

Code Syntax Highlighting on Blogger

Here is what I found here and especially here:

Syntaxhighlighter is a cool JS library for syntax highlighting on a web page.
  1. Download the latest version
  2. Unrar to a temp folder. ex: c:\temp\syntaxhighlighter
  3. Transfer the folders (Scripts and Styles) to a web server. I used googlepages to host my files (just use menu on the right side to upload all the files. Remeber, not all shBrush.js have to be uploaded, but only the ones you will use).
  4. Open blogger.com and sign in.
  5. Goto "Template" and choose "Classic" layout. (This is not needed with new wersion of Syntaxhighlighter. To do this anyway go to the EditHTML, and then in the left bottom of the page under HTML editing window find a link "Revert to the classic template" - of course, supposed that you have been using some more advanced template and not the classic one)
  6. Goto Edit Html.
  7. Right after <head> html tag of the template code insert the something like:
<link href="http://drasko.draskovic.googlepages.com/SyntaxHighlighter.css" type="text/css" rel="stylesheet" />
<script language="javascript" src="http://drasko.draskovic.googlepages.com/shCore.js"></script>
<script language="javascript" src="http://drasko.draskovic.googlepages.com/shBrushCpp.js"></script>
<script language="javascript" src="http://drasko.draskovic.googlepages.com/shBrushPhp.js"></script>
<script language="javascript" src="http://drasko.draskovic.googlepages.com/shBrushPython.js"></script>
<script language="javascript" src="http://drasko.draskovic.googlepages.com/shBrushVb.js"></script>
<script language="javascript" src="http://drasko.draskovic.googlepages.com/shBrushJava.js"></script>
<script language="javascript" src="http://drasko.draskovic.googlepages.com/shBrushCSharp.js"></script>
<script language="javascript" src="http://drasko.draskovic.googlepages.com/shBrushRuby.js"></script>
<script language="javascript" src="http://drasko.draskovic.googlepages.com/shBrushXml.js"></script>
<script language="javascript" src="http://drasko.draskovic.googlepages.com/shBrushCss.js"></script>
<script language="javascript" src="http://drasko.draskovic.googlepages.com/shBrushJScript.js"></script>
<script language="javascript" src="http://drasko.draskovic.googlepages.com/shBrushSql.js"></script><p></p>p>
Do not forget to change lines like http://drasko.draskovic.googlepages.com/shCore.js
to
http://youraccount.googlepages.com/shCore.jsGood.

One more step left - just before the closing tag insert:

<script language='javascript'>  dp.SyntaxHighlighter.ClipboardSwf =    'http://drasko.draskovic.googlepages.com/clipboard.swf';
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
Good. Now you are ready to use it - just embrace your code with <pre> xml tags, like here:

<pre name="code" class="java">
...some code in here...
</pre>



posted by Drasko Draskovic @ 7:20 PM   0 Comments

0 Comments:

Post a Comment

Subscribe to Post Comments [Atom]

<< Home