How To Add Syntax Highlighter (V3) To Blogger

Syntax Highlighter is a best script to show your HTML/JavaScript codes in your blog posts.Adding Syntax Highlighter to your blog is very easy but there are no correct and perfect posts which explains in details about adding syntax highlighter.The latest version of Syntax Hihglighter has been released and there are quite a few changes in the way things work now. This version was named Syntax Hihglighter 3.0.83.

What Is New In Syntax Highlighter 3.0.83 ?

• Dynamic Brush Loading

SyntaxHighlighter comes with almost 30 brushes out of the box. One of the most requested feature has been the ability to dynamically load them without having to load them all on the same page.

• No Flash Copy to Clipboard

Earlier, Flash was being used to copy the code to clipboard. This has now been removed and a simpler & better way to do this has been implemented. Also, the user can now simply double-click anywhere in the code to select it and then use the standard CTRL+C to copy it.

• Code Selection

This is also now part of the SyntaxHighlighter as it allows you to select the code with your mouse and then copy and paste it without straight into your code without any additional effort.

• Add Title

Now you can add a title to the code block by title="title name" parameter to the <pre> tag.

• More under the hood

More improvements and changes under the hood like better CSS support, easier integration with CommonJS & node.js, etc.

How To Add Syntax Highlighter To Blogger ?

1. Go to Blogger Dashboard  ?  Design  ?  Edit HTML.
2. Download your full template.
3. Now find </head>   tag and add below code just before/above it.

<!-- Syntax Highlighter By BTSNTS V-3.0.83 START -->
<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 src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js' type='text/javascript'/>
<script language='javascript' type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter By BTSNTS V-3.0.83 END -->

Some Important Tips

Whenever you have to write some codes in your posts, click on "Edit HTML" tab of your post editor and write the codes between the following tags.

<pre class="brush: js">
Your code here
</pre>

To add title in your code then follow this code.

<pre class="brush: js" title="Title Here">
Your code here
</pre>

Note - Before adding any code encode the script using HTML entities. You can encode your script using our HTML Entities Encoder.

For an example -

Below code like this

<b:includable id='comments' var='post'>
  <div class='comments' id='comments'>
    <a name='comments'/>
    <b:if cond='data:post.allowComments'>
      <h4>
        <b:if cond='data:post.numComments == 1'>
          1 <data:commentLabel/>:
        <b:else/>
          <data:post.numComments/> <data:commentLabelPlural/>:
        </b:if>
      </h4>

Will display like the below image on your blog post.