Add Syntax Highlighter To Blogger Blogs

by

In this article we will see how to add syntax highlighter in blogger blog. Syntax highlighter basically prettifies our snippet and display in well format with line number in list style. With the use of syntax highlighter shortcode we can add snippet in post and widget.
Syntax Highlighter use Javascript and CSS to prettify code and developed in JavaScript. So with use of syntax highlighter we can give best appearance to snippet in our blogger blog.
Add Syntax Highlighter To Blogger Blogs
How to add syntax Highlighter in blogger blog?
To add syntax highlighter we required to add some javascript and css in blogger blog. Then we can display snippet within shortcode to give a prettify appearance. For each type of code (mean for different programming language snippet) there is respective brush script.
For get more info about brush list click here . We have option of more than one theme to use for syntax highlighting. To can get more info about theme click here.

So let us see how to add syntax highlighter functionality:

I) Adding Syntax Highlighter brushes and style script.

Steps :
1) From blogger Dashboard, click on blog name you want to add syntax highlighter.
2) On left side menu, Click on Template. First of all take backup.
3) Click on “Edit HTML” button.
4) Paste the given code below just above .

<!-- Syntax Highlighter Start -->
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/2.1.382/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shCore.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCpp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCSharp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPython.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushRuby.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushXml.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/2.1.382/scripts/shBrushPerl.js' type='text/javascript'/>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/2.1.382/scripts/clipboard.swf&#39;;
SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter End -->

5) Click “Save Template”. Our coding part is finished.
6) Click “close”.

Now we have successfully added syntax highlighter script in blog.

II) Use Syntax Highlighter Shortcode.

Following the given below steps we can display prettified code using syntax highlighter.
Steps :

1) First of all encode your code using HTML Encoder Tool. Click here to encode. Copy encoded output.

2) Create a new post in HTML mode and put encoded code as shown below:

<pre class="brush:php;">
// encoded code here
</pre>

3) Click on “Publish”. That’s all.

Demo

So, with following above steps we can add syntax highlighter in blogger blog successfully. That’s it.

Leave a Comment