How To Add Syntax Highlighter In Blogger To Display Codes

Hey! Many a times you want share codes in your blog, but you don't find any way to do that. Most of the people just quote the codes. I also use Blockquote to display codes. But it is not a good way to display codes in your blog. Today, I will make you familiar with Syntax Highlighter and how to implement this to highlight codes in your Blogger blog.

Syntax Highlighter is free tool to display codes in Websites. And it is one of the most used code highlighter. Almost every web developer, blogger, webmaster uses this tool to display codes. It is developed by Alex Gorbatchev. You should thank to him for developing such a useful tool. It supports highlighting of large number of programming languages like as3, bash, csharp, coldfusion, cpp, css, jscript, java, javafx, perl, php, plain, powershell, scala, sql, vb, xml etc. Now we can know how to add this to Blogger blog.

Add Syntax Highlighter To Blogger

Blogger is one of the best blogging platform that provides many features for free. It is very simple to use. In this post I will show you how to add syntax highlighter in Blogger. It is very simple to add this in Blogger. You will only need to paste few codes in your Blogger template. There are two ways to add to add Syntax Highlighter. You can host its' java scripts files yourself. If you don't have file host than you can use free hosted version of Syntax Highlighter.

• If you want to host the scripts yourself than you can download the scripts from here.
• You will need to extract the files and than upload it to your server.

If you like to use free hosted version of Syntax Highlighter for Blogger than follow the steps given below. Don't forget to backup your template before any customization. Now follow the step given below:

• Go to Blogger Home.
• Now you have to go to Dashboard. In the dashboard Click on template.
• In the Template page click on Edit HTML which is below the live preview of your Blogger blog.
• Paste the code given below just before </head> tag. You can search for </head> tag by clicking anywhere in the HTML page and Press CTRL+F to open search box. In the search box type </head> and hit enter.
• After finding </head> tag paste the code given below just above/before the closing head tag(</head>).

<!-- SyntaxHighlighter starts -->
<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/shCoreMDUltra.css' rel='stylesheet' type='text/css'/><script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.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/shBrushJScript.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/shBrushJavaFX.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.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/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
SyntaxHighlighter.config.strings.viewSource = "Copy code from here";
SyntaxHighlighter.defaults['smart-tabs'] = true;
SyntaxHighlighter.defaults['toolbar'] = true;
</script>
<!-- SyntaxHighlighter ends -->

If you don't want to show these codes on home page than you can use conditional tags to do that. If you don't know how to use conditional tags than you can use the code given below. The code given below is same as the above code. I have just added conditional tag to show only in post pages.

<b:if cond='data:blog.pageType == "item"'>
<!-- SyntaxHighlighter starts -->
<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/shCoreMDUltra.css' rel='stylesheet' type='text/css'/><script src='http://alexgorbatchev.com/pub/sh/current/scripts/shLegacy.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.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/shBrushJScript.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/shBrushJavaFX.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.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/shBrushPlain.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'></script>
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.defaults['auto-links'] = false;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
SyntaxHighlighter.config.strings.viewSource = "Copy code from here";
SyntaxHighlighter.defaults['smart-tabs'] = true;
SyntaxHighlighter.defaults['toolbar'] = true;
</script>
<!-- SyntaxHighlighter ends -->
</b:if>

There are many more codes supported but you should not add the codes which is not necessary for your blog as it may slow down your page loading time. If you don't like the latest version of Syntax Highlighter i.e., 3.0.83 than you can replace current with the version you like. For eg. if you like Syntax Highlighter version 2.1.382 than replace current from the above code with 2.1.382. You must not remove code written in Yellow in the above code if you use it to highlight codes in Blogger Platform.
You can also customize Syntax Highlighter. Syntax Highlighter offers many themes and skins to choose from. To change the theme style, just replace the blue text from the above code with the theme style you like. You can check out their official site to check out the available themes.

Highlighting Codes in Post
Syntax highlighter will look for <pre></pre> tags which includes class brush. It means you will have to add your codes between pre tags in your post. See the code below to make it easier to understand.

<pre class='brush:xml'>
Enter your code here
</pre>

You can add the code which you want to highlight in place of  "Enter your code here". See text in red in the above code. You can replace xml with the type of code you are showing. Xml is used to highlight HTML codes. If you want to highlight HTML code than use xml instead. But make sure you escaped the HTML characters before adding your code. To Highlight codes in Blogger follow below steps.

• Go to Blogger post editor.
• Switch to HTML mode. and paste the code given below.

<pre class='brush:xml'>
Enter your code here
</pre>

•  Now add the codes which you want to highlight in place of "Enter your code here".
• Now you can save or publish your post.

That's all about adding/integrating syntax highlighter in Blogger. I wish you are able to add Synatx Highlighter in your Blog. If you need any kind of help than feel free to ask.

Hope you like it!