Pages

Tuesday, November 16, 2010

Add source code syntax highlighter to blogger

SyntaxHighlighter (by Alex Gorbatchev) it's a pretty good and customizable option.

It supports a lot of different languages and you can easily create new "brushes" for your language if it is not supported by default.

Now, adding 'Syntax Highlighter' to my blog:

Step1: Save old template

From Design->Edit HTML->Download Full Template

Step2:

In Design->Edit HTML, add the following before ending of the head element, just above </head>:
<!--SYNTAX HIGHLIGHTER BEGINS-->
<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>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.js' type='text/javascript'></script>
<script language='javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/current/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>
<!--SYNTAX HIGHLIGHTER ENDS-->
Other possible variants for "brushes" are:

shBrushCss.js, shBrushJava.js, shBrushJScript.js, shBrushPhp.js, shBrushPython.js, shBrushSql.js, shBrushRuby.js, shBrushVb.js, shBrushXml.js, shBrushPerl.js.

The brush "shBrushXml.js" applies also to html syntax highlighting.

Step3:
You can preview anytime the template.
And while creating a new post, use <pre> tag in the post.
The code of your post needs to go in between the
<pre class="brush: html">
and
</pre>
tags, in order to highlight properly.

Step4
Other possible themes (instead of "shThemeDefault.css":

shThemeDjango.css, shThemeEclipse.css, shThemeEmacs.css, shThemeFadeToGrey.css, shThemeMidnight.css, shThemeRDark.css.

No comments:

Post a Comment