amiths' notes: 12/10/10

We are quite new to blogging and when we blog our first posts faced difficulties when adding the code snippets. As beginners it was not that easy to find a solution for this, finally I came across this post which is quite interesting and helpful and it uses Javascript syntax highlighter .

Add Syntax Highlighting Step-by-Step

Go to Design by from your Blogger Dashboard
Select Edit HTML
Add following code immediately after <head> tag (Better to Backup Template before editing) and Save Template and you are ready to use
Note : remove any line of language you are not going to use

<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'></script> 

<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

(Note: current version of syntax highlighter does not support text wrapping if you need that replace current with 2.1.364 in above code)

After that you can use Method 1 or 2 to apply it to your posts

Method 1 - using the <pre> tag

Method 2 - using the special <script> tag

<script type="syntaxhighlighter" class="brush: html"><![CDATA[
<html>
<head>
<title>Title of the HTML page</title>

<meta name="title" content="Help Give to the Carter Tomorrow Fund" /> 
]]></script>

Note : you can replace 'html' to any of selected language (e.g. java, php, csharp, js, sql)

Change Theme
There are several themes currently available, this post uses shThemeDefault.css. To change the theme simply change this file to any of defined themes in here.

Encoding Code
If you are using "less than" or "greater than" symbols in your code snippets you have to use Method 2 but if you really want to use Method 1 use this to get escaped HTML code before adding it to your blog post.

Example Codes:

Before syntax highlighting (code to be inserted in the post Edit HTML view)

After syntax highlighting (final view of the code in the blog post)

That's it for syntax highlighting. Enjoy !

amiths' notes

Friday, December 10, 2010

Syntax Highlighting in Blogger