Thursday, November 27, 2008

Syntax-highlighting code in blog posts

SyntaxHighlighter is an easy to use syntax highlighter for posting code snippets in blogs. Here are the steps to incorporate SyntaxHighlighter into Blogger:

  • Go to the blog dashboard and select Layout for your blog.
  • Choose Edit HTML.
  • In the <head> section, paste in these two lines:
        <link href='http://syntaxhighlighter.googlecode.com/svn/trunk/Styles/SyntaxHighlighter.css' rel='stylesheet' type='text/css'/>
        <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js'/>  
    
  • In addition, for each language that you intend to highlight, add lines to import the relevant JavaScript libraries. The full list of supported languages is here. Here's the example for XML:
        <script language='javascript' src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js'/>
    
  • Finally, right at the bottom before the </body> tag, add:
      <script language='javascript'>
        dp.SyntaxHighlighter.BloggerMode();  
        dp.SyntaxHighlighter.HighlightAll('code');  
      </script>  
    
  • Save the blog template.
  • Now, in blog posts, surround code sections with (replace the class with the appropriate language name):
      <pre name="code" class="xml">...your code...</pre>
    
SyntaxHighlighter provides some configuration options that provide control over the layout of the highlighted code. It can also be used with <textarea>s instead of <pre>.

9 comments:

Anonymous said...

Works with Firefox, IE and Safari in my testing.

Unknown said...

Thanks! This was the easiest "how to" I could find, and it helped me out a lot.

Sergy said...

Hi, thanks for your title!
But I have a problem with FF 3.0.5
It doesn't load SyntaxHighlighter.css file content. IE and Opera works fine.
Can you help me?

Anonymous said...

@Sergy: This is a "problem" with Firefox's strict mime-type checking for .css files when one uses the Strict DOCTYPE directives. Since we're loading CSS files directly from Google Code, the mime-type does not match. Simplest fix is to remove the DOCTYPE directive (right at the top of your page template).

Joheinz said...

Brilliant! Especially the hint about the Firefox Doctype handling saved my day, if only I had read all the comments before implementing your hint.

Michiel Wouters said...

Great blog!

I want to use Powershell highlighting but the Powershell file is not on http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/

How can this be accomplished?

Anonymous said...

@Michiel: You might just consider using Vb syntax highlighting for PowerShell. My post is a little out-of-date at this point and there's a lot more information at SyntaxHighlighter's new site. Perhaps you can check there for more PowerShell-specific highlighting.

Anonymous said...

@Michiel: Yes, there is PowerShell support in SyntaxHighlighter 2.0.

Buhake Sindi said...

That helped me alot. Thanks dude!