Displaying code with Syntax Highlighting on websites and blogger

This actually took me quite some time as some information out on the web are deprecated and because I have little to no knowledge of html, javascript, and css.

Use Syntax Highlighting, the latest version being here. Set up instructions here. Note that the code for the two css files are not closed correctly, so u need to change the closing to ‘/>’. For blogger, there is some kind of

issue, and i don’t want to turn the line break feature on blogger off, so based on the comment at the end of the page, add ‘SyntaxHighlighter.config.bloggerMode = true;’ to the code.

To use in blogger, type, in html mode,

 <pre class="src src-js">&lt;pre <span style="color: #00ffff;">class</span>=<span style="color: #ffa07a;">"brush:js"</span>&gt;

code in here


where you type whatever language you want after brush:. Here is a list.

Example 1:

 <pre class="src src-C">testing;



Paste the following in after HEAD declaration in the blogger template. I am using the Emacs theme of course. NOTE I GUESS SYNTAX HIGHLIGHTER IS NOT DISPLAYING the “/>” when the two css files end, REMEMBER to do so!

 <pre class="src src-js">&lt;link href=<span style="color: #ffa07a;">"http://alexgorbatchev.com/pub/sh/current/styles/shCore.css"</span> rel=<span style="color: #ffa07a;">"stylesheet"</span> type=<span style="color: #ffa07a;">"text/css"</span>&gt;

<link href=“http://alexgorbatchev.com/pub/sh/current/styles/shThemeEmacs.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/shBrushJScript.js'” type=“‘text/javascript’/”> <script src=“‘http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCSharp.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/shBrushBash.js'” type=“‘text/javascript’/”> <script src=“‘http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCpp.js'” type=“‘text/javascript’/”> <script src=“‘http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.js'” type=“‘text/javascript’/”> <script src=“‘http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPerl.js'” type=“‘text/javascript’/”> <script src=“‘http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPython.js'” type=“‘text/javascript’/”> <script type=“‘text/javascript'”> SyntaxHighlighter.all(); SyntaxHighlighter.config.bloggerMode = true; </script>

When pasting html / javascript, etc, if blogger gives an error, just hit ignore!

Copy and paste code by hitting the view source icon!

About Vinh Nguyen


Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>