How To Add Syntax Highlighter to Blogger

Syntax Highlighter is mostly used to highlight the code. These codes are written in HTML, PHP, CSS, and JavaScript etc. The main purpose of this syntax highlighter is to display the syntax with different colors so that users easily read and understand the code. In this tutorial I show the simple steps to add the syntax highlighter to blogger blog.

Adding Syntax Highlighter to your blog

Step: 1 Go to Blogger Dashboard  > Design  >  EditHTML

Step: 2  Click on box to "expand widget templates"

Step: 3  Press CTRL+F to find the code </head>

Step: 4  Now copy the Below code or Paste before </head> tag

<!--SYNTAX HIGHLIGHTER BEGINS-->
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shCore.css" rel="stylesheet" type="text/css"></link>
<link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css" rel="stylesheet" type="text/css"></link>
<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>
<!--SYNTAX HIGHLIGHTER ENDS-->

It's Look like this:

Step: 5  Now Save your Template

Step: 6 When you write a New Post to use <pre> tag to Highlight the code.

Example of use this code

For Example you highlight HTML code

                 <pre class="brush:html">
                 Your 'HTML' code goes here
                  </pre>

Second Example: for CSS

                 <pre class="brush:css">
                 Your 'css' code goes here
                  </pre>

Also Check:         Themes for your Syntax Highlighter