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

Getting Mailvelope on Chrome to use GnuPG on macOS

Mailvelope is a browser add-on that helps use GPG encryption and signing on webmail systems like Gmail. Here are the steps on macOS (tested with "Big Sur") to get Mailvelope to use the GnuPG backend. Install gpgme via Homebrew: brew install gpgme This will install gpgme-json in /usr/local/bin by default.  Create a file called gpgmejson.json in  "~/Library/Application Support/Google/Chrome/NativeMessagingHosts" with the following contents: {     "name": "gpgmejson",     "description": "Integration with GnuPG",     "path": "/usr/local/bin/gpgme-json",     "type": "stdio",     "allowed_origins": [         "chrome-extension://kajibbejlbohfaggdiogboambcijhkke/"     ] } Now in Mailvelope > Options > General , GnuPG will show up as the encryption backend.