Saturday, July 11, 2009

Blogger Syntax Highlighting

How to add syntax highlighting to Blogger with Alex Gorbatchev's open-source SyntaxHighlighter.
  • Log into your blogspot account, select the "Layout" tab, and then click "Edit HTML."

  • Click "Download Full Template" to make a backup of your current template.

  • Make a copy of your template, open it in an editor, and find the </head> closing tag. Before that tag, add the following:
    <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'/>
    <!-- add brushes here -->
    <script type='text/javascript'>
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
    </script>

  • After the comment that says "add brushes here," add the languages you plan to use. For example, I'm using brushes for Javascript, Bash, SQL, XML/HTML, and C++:
    <!-- add brushes here -->
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.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/shBrushSql.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/shBrushCpp.js' type='text/javascript'/>
    See the full list of supported syntaxes.

  • Save your modified template, and upload it to Blogger (again, under Layout > Edit HTML).

  • You should now be able to add syntax highlighting to your blog. Wrap your code in a <pre> tag and specify the brush to use in the class attribute. For example, to highlight a block of SQL:

    <pre class="brush:sql">
    SELECT *
    FROM users
    WHERE user_id = 1212;
    </pre>

    Here's how that looks when rendered:

    SELECT *
    FROM users
    WHERE user_id = 1212;

  • The code you're formatting should be HTML encoded first. Also note that the Blogger preview won't show the formatting; you'll need to either go ahead and publish it or post it to a test blog first.

42 comments:

Mike Miller said...

Awesome - I just posted a comment to someone else's blog that was using this to find out how to use it. Thanks for the steps. Trying it now but seems like either the preview of a blog doesn't include it OR I did something wrong :-(

mla said...

@Mike: Yes, the preview window doesn't show the formatting.

John Ortiz Ordoñez said...

Hi! Now I have installed SyntaxHighlighter sucessfully, then trying to create a new weblog for Java Programming. Bye and thanks for this information!

Unknown said...

Excellent. Had just about given up when I found your post.

Rodrigo HJORT said...

That's an excellent article, thanks!

Anonymous said...

With your explanation it was easy for me to installand use SyntaxHighlighter.

Thank you.

Unknown said...

Thank you very much for this post.
I was looking for this kind of informations since longtime.

Tom said...

Instead of hitting Alex's site, maybe dropping the code onto Dropbox would be better.

Any idea of how that would perform?

Unknown said...

Thanks for the post. Really helpful :)

Sergei Dolgov said...

Thanks!

ianlee74 said...
This comment has been removed by the author.
ianlee74 said...

Doesn't seem to be working for me. :( I get the source code but no coloring or anything. Any ideas?

http://blog.ianlee.info/2011/08/using-external-button-led-with-netmf.html

mla said...

@Richard:

I see a javascript syntax error on this line:

SyntaxHighlighter.config.clipboardSwf = http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf;

I think you need to quote the URL. Does that fix it?

ianlee74 said...

@mla: That did it! You da man! Thanks!

Unknown said...

I have done all of it, but I still get in the published page:

<pre class="brush:sql">
SELECT *
FROM users
WHERE user_id = 1212;
</pre>

mla said...

@Dzenan: Are you editing in HTML mode (under the "Edit Html" tab)?

Aiman said...

im using this!

thanks a lot!!

Unknown said...
This comment has been removed by the author.
Unknown said...
This comment has been removed by the author.
Unknown said...

@Mike: Thanks a lot

danaltdel said...

Thanks a lot, this worked like a charm on my new blog. Did a stellar job on C#: http://danaltdel.blogspot.com/2012/05/automatically-generating-enum-from.html

Ruby Flew Too said...

very neat - worked beautifully on my blog http://rubyflewtoo.blogspot.co.uk before this i was using gists which are an enormous pain....

Daniel Bişar said...

Great! Just what I was looking for.

Bret Battey said...

Thanks! Saved me a lot of time.

Unknown said...

It doesn't work for me

Unknown said...

Note:

I've found a page where you can create valid code to include in your page

http://www.mybloggerlab.com/2012/07/how-to-add-syntax-highlighter-v3-in_31.html

toto said...

thanks :)
................... .

apoorvKumar said...
This comment has been removed by the author.
apoorvKumar said...
This comment has been removed by the author.
apoorvKumar said...
This comment has been removed by the author.
apoorvKumar said...
This comment has been removed by the author.
apoorvKumar said...
This comment has been removed by the author.
apoorvKumar said...
This comment has been removed by the author.
apoorvKumar said...
This comment has been removed by the author.
Kabuto said...

Thanks for the help. It worked perfectly on my blog.

Pavel Vladov said...

Nice Post, thanks for sharing.

In case you need a CSS based Syntax Highlighting of your C# code (no JavaScript at all), so that you can embed it in your website or blog easier, take a look at this Free Online C# Code Colorizer.

Gantengers said...
This comment has been removed by a blog administrator.
Samurai Bengkok said...
This comment has been removed by a blog administrator.
Unknown said...
This comment has been removed by a blog administrator.
Romi said...

Thank you

Gopikrishna said...

Thanks.. Worked for my blog.
www.gopiportal.in

rogeriohsjr said...

Thanks, It works on my blog as well.