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

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

AD-5526 Digital Multimeter

The AD-5526 is an ancient multimeter from A&D but for $10 one can’t complain. Has all the basic features one would expect from a multimeter and at 5.2 cm X 9.5 cm X 2.6 cm, it’s quite compact. Uses a LRV08 12V alkaline battery – not a common battery in the USA.

RTL-SDR, Raspberry Pi and Plane Spotting via ADS-B

Most modern aircraft carry an ADS-B ( Automatic Dependent Surveillance - Broadcast ) transmitter that puts out information about the aircraft's identification, geospatial location, speed, and heading. This information is received by ground stations and air traffic control and used as a replacement for radar-based tracking. ADS-B relies on line-of-sight communication via signals transmitted at 1090 Mhz and has a range of up to 250 nautical miles. Sites such as FlightAware , FlightRadar24 , Plane Finder , RadarBox24 , etc. collect ADS-B information using a vast array of ADS-B receivers, some of which are run by hobbyists, and present this information on maps with near-real-time updates. With the advent of cheap software-defined-radio (SDR) dongles, over the past few years, it has become extremely cheap and easy for amateurs to receive ADS-B signals, upload data to these sites and, in exchange, get access to premium features from these sites. This guide will walk you t...