How to show code in blog post using Syntax Highlighter

Web browsers are smart, you give them codes, they render them into images and display on the monitor. That’s good, but what if all you want to do is just to display the codes in your post, as it is. There are quite a few solutions available on the internet, but what I am going to show you is think among the better ones.

(Note: Before we proceed, if you plan to use this only occasionally, then just use <code>…</code> tags. It’s built-in, so you don’t have to add anything, but the code won’t look as good).

It is called SyntaxHighlighter by Alex Gorbatchev. It uses JavaScript library, does the highlighting using CSS, and supports (the highlighting of) many programming languages. I am going to explain how do you go about using this tool:

I) Preparing your template

1. Download the scripts. You can download all the required script files here.
2. Extract the files and upload them to your server. Upload only the needed files, you’ll find out the one you need as you read along. If you don’t have a file host, don’t despair, there is a free hosted version.
3. Link the files to your HTML template by adding the following code right before the </head> tag:
   (For the purpose of this demonstration it will be assumed that scripts/*.* was extracted and put inside /scripts folder and styles/*.* are put inside /styles folder.)

   <link type="text/css" rel="stylesheet" href="/styles/shCore.css" /> 
   <link type="text/css" rel="stylesheet" href="/styles/shThemeDefault.css" /> 
   <script type="text/javascript" src="/scripts/shCore.js"></script> 
   <script type="text/javascript" src="/scripts/shBrushJScript.js"></script> 
   <script type="text/javascript" src="/scripts/shBrushBash.js"></script>
   <script type="text/javascript" src="/scripts/shBrushCpp.js"></script>
   <script type="text/javascript">
   SyntaxHighlighter.all();
   </script> 

4. You can apply a theme (as in code line 2) other than the default. Upload them and add the link into the code. For additional syntax support, add more brushes (as in code line 4 to 6). But remember more links equals slower page loading.

II) Adding code block (that you want to show) into your post

SyntaxHighlighter looks for <pre></pre> (pre-formatted text) tags  which have specially formatted class attribute. The only required parameter is brush (see configuration) which should be set to one of the brush aliases that you have loaded previously.

1. First you need to HTML-escape your code snippet to convert special characters such as < and > to their escaped entities < and > respectively. You can do this manually or use an online escape tool.
2. Go to post editor and switch to Edit HTML mode.
3. Place the escaped code inside <pre> tags, with class attribute included, like so:
   

   <pre class="brush: js">
   ENTER YOUR ESCAPED CODE SNIPPET HERE
   </pre>

If you use Window Live Writer to edit you posts, you can use this Syntax Highlighter plug-in by Arnold Matusz. With this plug-in, you just copy and paste the code into the plug-in screen. You don’t have to escape the code or manually enter it, all you have to do is paste the code inside the plugin window.

III) Integrating Syntax Highlighter with Blogger

For a Blogger blog, you must add the following:

• Add this line inside the last script tag in I)3:

  SyntaxHighlighter.config.bloggerMode = true;

  (see the code I use in Blogger Sentral below).
• Go to Post Editor > Options > Line Breaks and select ‘Press "Enter" for line breaks’.

IV) Using free hosted version

I use this option, no need to download or upload anything. See my code below:

<!-- mula alexgorbachev.com syntax highlighter -->
<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/shBrushXml.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/shBrushJScript.js' type='text/javascript'/> 
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!-- tamat alexgorbachev.com syntax highlighter –>

Just copy the codes above and add extra scripts you need. This is the  location of hosted script files.

Enjoy!

ps. SyntaxHighlighter is a donationware, if you do use it, please consider donating to the owner. Thanks