Wednesday, February 18, 2009

Syntax Highlighter in blogger for source code publishing

If you are new to blogger and you may not be happy with your source code snippets' appearance when published. I have faced the similar issue and here I shall explain how easy to solve it. I am now using Syntax Highlighter for source code publishing in my blog for code highlighting. For a sample please see how this post looks with source code highlighted. Once you implement source code highlighting with Syntax Highlighter viewers or readers can see your code with a pretty cool look, then they have options like view plain code, print code etc. So start making your code snippets in blogger attractive with Syntax Highlighter, here are the steps
  • Step 1: You may need to download and host Syntax Highlighter's .js scripts to some where at web and make it accessible. If you dont have an option to host over web you can use mine(shown in the step 3).
  • Step 2: Log in to blogger and take Layout. Select Edit HTML in the Layout tab now you can see Edit Template with html of your template.
  • Step 3: In the Edit Template search for /head and add the below code just before the /head. If you have hosted syntax highlighter scripts to some page you can use that address instead of mine.
<link href='http://rinuraj4u.googlepages.com/SyntaxHighlighter.css' rel='stylesheet' type='text/css'>
<script language='javascript' src='http://rinuraj4u.googlepages.com/shCore.js'>
<script language='javascript' src='http://rinuraj4u.googlepages.com/shBrushCSharp.js'>
<script language='javascript' src='http://rinuraj4u.googlepages.com/shBrushPhp.js'>
<script language='javascript' src='http://rinuraj4u.googlepages.com/shBrushJScript.js'>
<script language='javascript' src='http://rinuraj4u.googlepages.com/shBrushJava.js'>
<script language='javascript' src='http://rinuraj4u.googlepages.com/shBrushVb.js'>
<script language='javascript' src='http://rinuraj4u.googlepages.com/shBrushSql.js'>
<script language='javascript' src='http://rinuraj4u.googlepages.com/shBrushXml.js'>
<script language='javascript' src='http://rinuraj4u.googlepages.com/shBrushDelphi.js'>
<script language='javascript' src='http://rinuraj4u.googlepages.com/shBrushPython.js'>
<script language='javascript' src='http://rinuraj4u.googlepages.com/shBrushRuby.js'>
<script language='javascript' src='http://rinuraj4u.googlepages.com/shBrushCss.js'>
<script language='javascript' src='http://rinuraj4u.googlepages.com/shBrushCpp.js'>
  • Step 4: Now search for /html tag in the Edit Template and add the below code just before the /html tag.
<script language='javascript'>
dp.SyntaxHighlighter.BloggerMode();
dp.SyntaxHighlighter.HighlightAll('code');
</script>
  • Step 5: Save your template now.
  • Step 6: Now for highlighting your code snipetts, take Edit Html of your posts and embed code with in suitable tags given below,
<pre name="code" class="Cpp">
... some code here ...
</pre>
For a list of supported languages and class names to be used for syntax highlighter see here.

No comments: