How to Add Syntax Highlighter to Blogspot

Syntax Highlighter is a feature of some text editors that display text—especially source code—in different colors and fonts according to the category of terms. Syntax Highlighter eases writing in a structured language such as a programming language or a markup language as both structures and syntax errors are visually distinct.

Follow the step below to add Syntax Highlighter to your Blog (Blogspot):


Login to your blogger account, then open Design menu and choose Edit HTML

The next step, open this this CSS code link SyntaxHighlighter.css, copy it all and paste before ]]--></b:skin>

Paste the code below before tag </body> :

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shCore.js' type='text/javascript'></script>

Then copy the one or more "Brush" (depend to language you use).

Language: C++
Alias: cpp

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCpp.js' type='text/javascript'></script>

Language: C#
Alias: csharp

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCSharp.js' type='text/javascript'></script>

Language: CSS
Alias: css

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushCss.js' type='text/javascript'></script>

Language: Delphi
Alias: delphi

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushDelphi.js' type='text/javascript'></script>

Language: Java
Alias: java

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJava.js' type='text/javascript'></script>

Language: Java Script
Alias: jscript

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushJScript.js' type='text/javascript'></script>

Language: PHP
Alias: php

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPhp.js' type='text/javascript'></script>

Language: Python
Alias: python

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushPython.js' type='text/javascript'></script>

Language: Ruby
Alias: ruby

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushRuby.js' type='text/javascript'></script>

Language: SQL
Alias: sql

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushSql.js' type='text/javascript'></script>

Language: Visual Basic
Alias: vb

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushVb.js' type='text/javascript'></script>

Language: XML / HTML
Aliases: xml, html, xhtml, xslt

<script src='http://syntaxhighlighter.googlecode.com/svn/trunk/Scripts/shBrushXml.js' type='text/javascript'></script>

Then copy the next script:

<script language="javascript">
 dp.SyntaxHighlighter.BloggerMode();
 dp.SyntaxHighlighter.HighlightAll('code');
</script>

Save your template

To use SyntaxHighlighter on your post, copy and paste the code below in Edit HTML when you create or edit your post
<pre class="ALIAS" name="code">YOUR CODE HERE</pre>

replace "ALIAS" to language alias of language you use, also replace "YOUR CODE HERE" to your code

If you want to show HTML code, you need to replace all "<" with "&lt" and ">" with "&gt;" (without quotes) or you can encode it here