Skip to main content

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>.

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.
Buhake Sindi said…
That helped me alot. Thanks dude!

Popular posts from this blog

FCC Aproves Sirius-XM Merger

This has been a long time coming but finally the FCC has finally approved the merger of Sirius Satellite Radio with XM Satellite Radio . The combined entity is pretty much a monopoly in the satellite radio space but they are still competing with terrestrial radio. Either way, their stocks, NASDAQ:SIRI and NASDAQ:XMSR should get a good boost on Monday. Yahoo! Finance Quote for SIRI Quote for XMSR

Lead Tide SIM Reader

I recently came across a cheap little device for reading SIM cards . It was available from Meritline for less than USD 5 with free shipping. Curious to see what it was like, I ordered one. The device came in a small package along with a mini CD containing drivers. The packaging advertised the device as the LEAD TIDE Sim reader . Like most things these days, it's made in China. The device has a USB 1.1 interface. There was no product code or number anywhere on the packaging. Installing the drivers for the device turned out to be harder than I expected. The mini CD's autorun installed some stuff but Microsoft Windows XP couldn't install any suitable driver for the device. The mini-CD had several top level directories with what appeared to be product codes but I couldn't match any to the device itself since it had no product code. Google searches revealed that I wasn't alone in my endeavors to get the device working . Further digging revealed pointers to some thir

Migrating from Palm Calendar to Google Calendar and iPhone

Here are the free steps to migrate from Palm's date book (or Pimlico's DateBk6 ) calendar to Google calendar for full iPhone sync. First, sync Palm with Palm Desktop . Next, open Palm Desktop, select the Calendar view, navigate to File | Export, select Export Type as Date Book Archive, Range as All and provide a file name. This will export the calendar data as Date Book Archive (.dba). There's a paid tool called DBA2CSV that converts .dba files to .csv files. However this can be done for free using Yahoo Calendar. Login into Yahoo Calendar and via Settings/Import, import the .dba file. It helps to have an empty Yahoo Calendar. Via Settings/Export, export the calendar as .csv file. Login to Google Calendar (also works with Google Apps For Your Domain GAFYD Calendar) and import the .csv file into any of the calendars. It is a good idea to create a test calendar and test the import before importing into your real calendar. That way if anything goes wrong, you can delet