How to use SyntaxHighlighter for Blogger

syntax_featured

Today, I will teach you how to use SyntaxHighlighter with Blogger. So instead of posting code like this:

// Welcome to SyntaxHighlighter
function helloSyntaxHighlighter()
{
 return "hi!";
}

with SyntaxHighlighter you can get this:

 

// Welcome to SyntaxHighlighter
function helloSyntaxHighlighter()
{
 return "hi!";
}

In this tutorial we will implement the latest version of SyntaxHighlighter which is (3.0.83) at the time this tutorial was posted. The latest version can be downloaded from SyntaxHighlighter (3.0.83).

For this to work you would need a host or website which can be linked from your blog.

Ok now, here how it is done:

  1. Download the latest version of SyntaxHighlighter.
  2. Extract the contents of the package
  3. Upload the (Scripts) and (Styles) folders to any host or website which can be linked from your blog
  4. In Blogger go to Design tab and then Edit HTML and just right before the end of the <HEAD> section paste the following code which will link to the required script files.
<script src='[HostUrl]/scripts/shCore.js' type='text/javascript' />
<script src='[HostUrl]/scripts/shBrushJScript.js' type='text/javascript' />
<script type='text/javascript'>SyntaxHighlighter.all();</script>
<link href='[HostUrl]/styles/shCoreDefault.css' rel='stylesheet' type='text/css' />

Afetr doing that you need to use the <pre> tag whenever you include code in your posts. Inside the <pre> tag you can specify what type of code you are intending to include with a simple class attribute.

For the JavaScript example seen at the top of this page I used this:

<pre class=”brush: js;”>

// Welcome to SyntaxHighlighter
function helloSyntaxHighlighter()
{
return “hi!”;
}
</pre>

You change the value for brush according to the type of code you are posting.

Obviously if you need to use code other than JavaScript you need to link to it and then include in the HEAD section of your template.
 For more information about which file to include for which code visit: Bundled Brushes

How to use SyntaxHighlighter for Blogger
1 vote, 5.00 avg. rating (90% score)
  • Posted in: Tutorials
Husamaldin Tayeh

Posted by

Husamaldin is a computer programmer, blogger, entrepreneur and an overall thinker. He is the founder and editor of Coders Mount. He loves everything about computers and programming. Find out more about him here or follow him on Twitter Google+ | LinkedIn.