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 &lt; and &gt; 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

42 comments to "How to show code in blog post using Syntax Highlighter"

Arnold Matusz April 16, 2009 at 6:07 PM    

Hi, thanks for mentioning my plugin in your post!
Arnold

Greenlava April 16, 2009 at 8:47 PM    

Hey Arnold, I was going to write you a thank you note for providing such a great plug-in. But you got me first!
Thanks

Brian May 7, 2009 at 12:16 AM    

thanks for share experience

Greenlava May 7, 2009 at 9:05 AM    

@Brian,
Thank you for stopping by.

Abel The Legend (X-ROID) August 18, 2009 at 9:07 PM    

thank u buddy....this helped me alot

Greenlava August 18, 2009 at 11:13 PM    

You're welcome

Matka/HTML September 20, 2009 at 4:24 PM    

i'd tried using this plugin in its previous avatar couple of months ago and it didn't go smooth then. thanks to your post (and probably the new version), i was able to get it working in 10 minutes flat! :-)

Greenlava September 23, 2009 at 12:19 AM    

You're welcome Matka.

Piyush November 11, 2009 at 9:26 AM    

You really Rocks dude, see i have done it after so much digging - http://www.geekblogger.org/2009/11/how-to-add-breadcrumbs-in-blogger-to.html, thank you very much. :-)

Greenlava November 12, 2009 at 8:34 AM    

Piyush,
You're welcome. It looks good.

Sherri January 17, 2010 at 10:44 PM    

I tried to do the code tags but after putting comments in the post and then the HTML with the code block but when I preview my post the HTML is not listed. Any help would be great!

Greenlava January 18, 2010 at 8:49 AM    

@Sherri
Make sure you enter it correcly (replace [] with <>)
[code]code here[/code]

You can also use:
[samp]code here[/samp]

Anonymous,  May 20, 2010 at 11:03 PM    

Hi,,,I am using your code but got stuck when i try to add blogger code with "expr:path="data:post.url" expr:permalink="data:post.url" it parse the expression then disply whole parsed code instead of original one....can you pls help me out.....

any doubt pls look here:
http://www.fixflow.net/2010/05/how-to-add-star-rating-to.html
-pls rply

Greenlava May 21, 2010 at 12:31 PM    

@Anonymous
I see you've fixed it.

me May 22, 2010 at 1:21 AM    

no..

Actually original code is:

<div style="float:left; margin-right:3px;"></div>
<div class="js-kit-rating" expr:path="data:post.url" expr:permalink="data:post.url" expr:title="data:post.title" view="score">
</div>

but displays unexpected things that u already checked.

me May 22, 2010 at 2:38 PM    

Now...I've fixed it....

Greenlava May 22, 2010 at 3:36 PM    

@me
I guess the problem was with the brackets (less than and greater than signs).
I forgot to mention that they need to be escaped. Anyway I've updated step 2, mentioning that requirement.

Anonymous,  May 22, 2010 at 11:17 PM    

exactly "the brackets". Step 2 need to be updated...so others can save their valuable time.....and thanx for the post..

Greenlava May 23, 2010 at 2:29 PM    

@Anonymous
Update completed. I also added a link for an online HTML-escape tool.

Anonymous,  August 20, 2010 at 3:49 AM    

where do i place an add code on my blog

Greenlava August 22, 2010 at 12:08 AM    

@Anonymous
Place the code in your post's HTML mode.

Anuradha Liyanage September 14, 2010 at 7:22 PM    

Hi Greenlava
Would you be kind enough to explain how to add copy to clip board and print next to ? on syntaxhighlight, many thanks in advance

Greenlava September 16, 2010 at 11:33 PM    

@Anuradha Liyanage
Hover the code and the icons will appear.

Anshul October 16, 2010 at 9:35 PM    

Thanks for this tutorial. I have a question, though it is a little off-topic.

I noticed that to go to a particular section of the blog article (namely free hosted version) you have used #free in the url. Clicking on that it automatically takes to that section of the article. Can you please explain how this is achieved?

Greenlava October 19, 2010 at 12:11 PM    

@Anshul
Visit this post: How to Jump to a location on same page

Anshul October 19, 2010 at 12:56 PM    

Thanks a lot :) I'm off to that post now

YoboY November 25, 2010 at 7:27 PM    

Hi Greenlava,

When you switch to a custom domain from blogger domain, did you face any problems with syntax highlighter? I switched to a custom domain few days ago, and SH is not working now. I quickly switched back to blogspot.com domain and it worked. I tried lots of other troubleshootings as well. I even duplicated my entire template in a test blog, and it worked there (blogspot.com). But it's not working on my custom domain.

Removing/adding SyntaxHighlighter.config.bloggerMode = true; didnt do any good. Any ideas?

Regards.

Greenlava November 26, 2010 at 1:27 AM    

@YoboY
You host the CSS and Javascript files on Google Sites. That's the reason. .css and .js files only work on blogspot domain.
To make .js work in custom domain you have to change the extension to .txt.
As for .css files, you have to host it somewhere else.

YoboY November 26, 2010 at 3:20 AM    

You, my friend, are a life-saver. Thanks!

RaindropSoup December 17, 2010 at 9:55 AM    

Hello, I wanted to ask, how did you get the 'menu bar' in your SH box? The icons/buttons to 'View Source', 'Print', and 'About' are convenient, I would love to be able to include them with the SH on my blog. Thank you so much ahead of time.

Greenlava December 17, 2010 at 3:48 PM    

@RaindropSoup
It came with the scripts, built in.

YoboY December 17, 2010 at 8:21 PM    

Greenlava: RaindropSoup was asking me if it was possible to word-wrap SH when it is used in a table. I tried to div-wrap it and define its width, but that doesnt seem to work. Have you came across a working way?

Greenlava December 18, 2010 at 2:53 AM    

@YoboY
I believe all CSS declarations used in SH have !important added to them. That means, any re-declarations afterwards (in the hope of overriding the previous declarations) will not work.

Jeet Dholakia April 10, 2011 at 2:15 PM    

Hello,
i read you post but not able to insert Syntax Highlighter in my blogger account.please help me i want it badly so if you can tell me some simplest way that how to implement in blogger.
thank you.

OrangeJuice June 20, 2011 at 8:47 PM    

Hi, thanks for you post!! Just one last queestion...I would like to know how did you add the "copy/print/help" buttons that appears on the top right of the code in your blog? could you help me? I would like to add them also to my blogspot.

Thanks in advance!!

Greenlava June 21, 2011 at 3:05 PM    

@OrangeJuice
It came with SyntaxHighlighter scripts.

bestbloggerarea.blogspot.com July 16, 2011 at 9:12 PM    

nice post ....many many thanks

essay December 14, 2011 at 12:27 AM    

Well, this syntax really works on my posts on a blog sites. great!

SR February 5, 2012 at 6:43 PM    

I was searching such a scripts few days. I got it here. Thanks to provide.

kopi anget December 11, 2012 at 1:03 PM    

thanks for this tutotial, nice one!

ishtaq ahmed December 12, 2012 at 8:19 AM    

hi Green Lava Bro. how can i use syntax highlighter like your blog... plz tell me i am waiting for your answer..

Greenlava December 12, 2012 at 6:26 PM    

@ishtaq ahmed
I'm using the same method explained in this tutorial.

Click to go to top Click to comment