SyntaxHighlighter for your Website/Blog

It is a must for any one who want to share his/her codes in a website or blog. As for me it is necessary for discussing codes in my blog. It is very easy to setup syntax highlighting in your site. I thank Alex Gorbatchev for creating such a great script.

Here's the simple step by step on how to add it to your Blogger.





1) Login to your Blogger account, go to Design tab and click Edit HTML link.

2) Before editing HTML, take a Backup copy of your template

3) Copy the code below

<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/shAutoloader.js' type='text/javascript'/>

<script type='text/javascript'>
function path()
{
var args = arguments,
result = []
;

for(var i = 0; i &lt; args.length; i++)
result.push(args[i].replace("@", "http://alexgorbatchev.com/pub/sh/current/scripts/"));

return result
};

SyntaxHighlighter.autoloader.apply(null, path(
'applescript            @shBrushAppleScript.js',
'actionscript3 as3      @shBrushAS3.js',
'bash shell             @shBrushBash.js',
'coldfusion cf          @shBrushColdFusion.js',
'cpp c                  @shBrushCpp.js',
'c# c-sharp csharp      @shBrushCSharp.js',
'css                    @shBrushCss.js',
'delphi pascal          @shBrushDelphi.js',
'diff patch pas         @shBrushDiff.js',
'erl erlang             @shBrushErlang.js',
'groovy                 @shBrushGroovy.js',
'java                   @shBrushJava.js',
'jfx javafx             @shBrushJavaFX.js',
'js jscript javascript  @shBrushJScript.js',
'perl pl                @shBrushPerl.js',
'php                    @shBrushPhp.js',
'text plain             @shBrushPlain.js',
'py python              @shBrushPython.js',
'ruby rails ror rb      @shBrushRuby.js',
'sass scss              @shBrushSass.js',
'scala                  @shBrushScala.js',
'sql                    @shBrushSql.js',
'vb vbnet               @shBrushVb.js',
'xml xhtml xslt html    @shBrushXml.js'
));

SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>
<!-- Syntax Highlighter-->

3) search for </body> tag, then paste the code before the tag.

<!-- paste the code here -->

</body>

4) Click 'Save Template'. If everything goes right it will be saved successfully

5) Create a new post, click 'Edit Html' and past the code below and publish

<pre class="brush: js">
/**
 * SyntaxHighlighter
 */
function foo()
{
 if (counter <= 10)return;   
 // it works!     
}   
</pre>

If everything goes right, the source code that you've posted will get syntax highlighted in JavaScript.

Note:

• In Blogger all < must be replaced with &lt; This will ensure correct rendering.


• None Blogger users can delete SyntaxHighlighter.config.bloggerMode = true;


• You can change the theme by modifying

     <link href="http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css"  rel="stylesheet" type="text/css" />

Available themes are shThemeDjango.css, shThemeEclipse.css, shThemeEmacs.css, shThemeFadeToGrey.css, shThemeMidnight.css, shThemeRDark.css