Pages

Showing posts with label code. Show all posts
Showing posts with label code. Show all posts

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.