This post explains how to install and use Alex Gorbatchev's SyntaxHighlighter in Blogger to format computer code in your posts. Here's an example of unformatted code:



class Product < ActiveRecord::Base

  belongs_to :rulemaking

  belongs_to :sector

end

And here's an example of some Ruby code formatted by SyntaxHighlighter.

class Product < ActiveRecord::Base
  belongs_to :rulemaking
  belongs_to :sector
end

Much better.

Install SyntaxHighlighter

To install SyntaxHighlighter, copy the following lines into the template file of your blogger blog; insert them immediately before the closing </head> tag, as in the following example (all other code has been removed):

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html ... >
  .
  .
  .
  <head ... >
    .
    .
    .

    <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/shBrushCpp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.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/shBrushPlain.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushRuby.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushVb.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/shBrushPerl.js' type='text/javascript'/>
    <script language='javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.config.clipboardSwf = &#39;http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf&#39;;
    SyntaxHighlighter.all();
    </script>
  </head>
  <body>
    .
    .
    . 
</body>
  .
  .
  .

Save the file. That's it for installation.

Use SyntaxHighlighter

To use SyntaxHighlighter, simply wrap your code in <pre> tags as follows:

class Product < ActiveRecord::Base
  belongs_to :rulemaking
  belongs_to :sector
end

In this example, I'm rendering Ruby code; but you can replace the word "ruby" with any of the languages described by the file names of the source code above. That's it. I don't know how, but it works for me.

Paste plain text code into the "Compose" window

One gotcha: When pasting in code from an application, make sure you're pasting in plain text, and make sure you're pasting it into the "compose" window (as opposed to the "Edit HTML" window). Why? Because when you paste text into the compose window, Blogger escapes the HTML. For example, the symbol "<" is escaped to become "<". We want that; after pasting code, if you switch over to the "Edit HTML" window, you'll see all the escaped characters. Those are just fine the way they are.

Why paste plain text? Because Blogger will grab all sorts of formatting from any code you copy, such as colors, indentation, and the like. This will fill your code example with spans and result in a mess. How do you make sure you're pasting plain text? First copy the code into a text editor (e.g. Windows Notepad), then recopy that same code from the text editor. Now it's plain text.

Summary: Paste plain text code into the "Compose" window, not the "Edit HTML" window.

One word of caution: If you ever switch templates through Blogger's "Design" tab, you'll have to paste the template code back in because it will be overwritten.

Thanks to Alex Gorbatchev for a great tool. Think about making a donation for his work.

Andrew!

Sunday, January 16, 2011

How to install and use SyntaxHighlighter in Blogger

Install SyntaxHighlighter

Use SyntaxHighlighter

Paste plain text code into the "Compose" window

1 comment: