syntax highlighting in blogspot blog

2009-09-29T02:51:00.000-07:00

Ever wanted to highlight the code syntax of your code snippet on blogspot? I guess you always do. What to use? Of course its going to be Alex Gorbatchev's Syntax Highlighter. But its a bit tricky to use it on blogger. To make it work properly, you will have to add the css links and js codes to the lauout file of your blogspot blog.

I always use the hosted code at alxgorbatchev.com.

Step 1. Log in to your blog dashboard

Step 2. then go to LAYOUT >> EDIT HTML

Step 3. Right before the closing head tag, add this css files

http://alexgorbatchev.com/pub/sh/current/styles/shCore.css

http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css

Step 4. Then add these js files at the bottom of the page, right before the closing body tag.
http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js

http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js

http://alexgorbatchev.com/pub/sh/current/scripts/shBrushBash.js

http://alexgorbatchev.com/pub/sh/current/scripts/shBrushSql.js

http://alexgorbatchev.com/pub/sh/current/scripts/shBrushXml.js

http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js

then add this few lines of javascript

Step 5. All you have to do now is to write the real sourcecode to be shown with the highlighter. For example,




function test()
{
    return 10;
}

That will do it. You will have a prefectly running syntax highlighter now. Enjoy!

World of Possibilities

syntax highlighting in blogspot blog