Friday, November 20, 2009

Embed Code Syntax Highlighting in Blog

Hi Friends,

If you are a developer & want to share your code over the blog with proper highlighting & syntax, then Blogger/Wordpress doesn't have the immediate solution out here!

A quick workaround for Blogger can be to embed your source between:
<blockquote></blockquote>
tags in order to prevent them from getting parsed.
E.g.


But for the formatting & highlighting used to quote above
example, an excellent open source tool called SyntaxHighlighter is available.

This is ready to use out of box 100% Javascript based SyntaxHighlighter with extensive features & multiple other options.

SyntaxHighlighter can be either downloaded & used on your own webserver or if you have a blog on Blogger, this can be directly used as well.

To downloaded SyntaxHighlighter for your own personal Webserver/Hosted Site: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Download
Configuration Steps: http://alexgorbatchev.com/wiki/SyntaxHighlighter:Configuration
Brush Aliases:http://alexgorbatchev.com/wiki/SyntaxHighlighter:Brushes

In order to install & use it on Blogger, follow the below simple steps:
1) Go to your Template Layout->Download your template as a backup first
2)Now click Edit HTML for Layout & then paste the below code in your Template before your </head> tag ends. Note this is pointing to the Latest released version v2.1.364; older versions can be found at: http://alexgorbatchev.com/pub/sh/

<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shCore.css' rel='stylesheet' type='text/css'/> 
<link href='http://alexgorbatchev.com/pub/sh/2.1.364/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shCore.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCpp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCSharp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushCss.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJava.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushJScript.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPhp.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPython.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushRuby.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushSql.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushVb.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushXml.js' type='text/javascript'></script> 
<script src='http://alexgorbatchev.com/pub/sh/2.1.364/scripts/shBrushPerl.js' type='text/javascript'></script> 
<script language='javascript'> 
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.config.clipboardSwf = 'http://alexgorbatchev.com/pub/sh/2.1.364/scripts/clipboard.swf';
SyntaxHighlighter.all();
</script>

3)Save the template & open you blog in IE & Firefox to test if any javascript errors are reported as this might conflict with various other embedded scripts in your template.

This completes the direct embedding of SyntaxHighlighter in your Blog. Now lets proceed how to use it in your posts:

Usage:
For SyntaxHighlighter 2.0 & above:
Any code you want to be placed & displayed using SyntaxHighlighter must be enclosed in:

<script type="syntaxhighlighter" class="brush: html"><![CDATA[
#######YOUR CODE############
]]></script>

Note that we have option of using different brushes for highlighting different type of codes..e.g. HTML/ASP/C++ etc
In order to choose the appropriate brush, following are the various brush aliases supporting the corresponding code highlighting:
actionscript3
bash, shell
c-sharp, csharp
cpp, c
css    
delphi, pas, pascal
diff, patch
groovy
js, jscript, javascript
java
jfx, javafx
perl, pl
php
plain, text
ps, powershell
py, python
rails, ror, ruby
scala
sql
vb, vbnet
xml, xhtml, xslt, html, xhtml

Above aliases can be used at: class="brush: alias" while embedding your code in the Blog.

Another easy way supported by SyntaxHighlighter is to enclose the code within:



The only catch involved out here is, you have to use encoded HTML while embedding within <pre>tags.
Your code can be converted to HTML Encoded using following easy to use Tool:
http://www.string-functions.com/htmlencode.aspx

Just copy paste your code & generate the encoded HTML Code. Paste the encoded HTML within <pre>tags for correct rendering. Failure to do so might render wrong code, especially < & > brackets.

Some examples of codes in my Blog:
http://geektalkin.blogspot.com/2009/07/historical-audit-trail-information.html

http://geektalkin.blogspot.com/2009/11/batch-program-to-rename-file-with-date.html

Keep Blogging!

Keywords: Blogger, Embed Code, Code, Syntax, Syntax Highlight, Syntaxhighlighter, Javascript, Blog Tricks, Blogs, Java, SQL, ASP, HTML, HTM, C#, XML, XSL, JS, CSS, PHP, PL, CGI, embed code blog,embed blogger blog, embed youtube blogger, swf embed code, you tube embed code, embed src code, embed wordpress blog, embed video blogger, myspace embed code,embed into, html code,rss feeds,blogger templates, blogger,syntax highlighting,script error,script,etc

18 comments:

ദീപക് -:-Deepak said...

Thank you Salabh for this tip. You have a nice way of presenting things simplified, without losing the essence.

Ashish Derhgawen said...

Thank you for this tut! It helped me configure it for my blog!

Joseph Johann Pena said...

Thanks! Exactly what I needed..

theholyjava said...

Actually Wordpress now has a great support for inserting source codes - you only enclose your code with [sourcecode language="css"]...[/sourcecode]

It uses the Syntax Highlighter and supports all or most of its configuration. Lovely!

See http://en.support.wordpress.com/code/posting-source-code/

Shalabhsneha Katdare said...

True...accepted that Wordpress incorporated it!

But what about Blogger? Anyone thinking of putting this together as an Widget for Blogger?

Jose Victor Cardoso said...

great job. it helped install in my blog. Because i'm a newbie in this area this topic was the most useful for me.

Luis Rocha said...

Thanks for the article! I was having problems to get the syntaxhighligghter to work properly with blogger. The other articles I found were more complicated and didn't work 100%. Your instructions are very simple and easy to follow, and it works perfect!

Anonymous said...

There is a cool syntax highlighter implementation over at .

Prayag Verma said...

thanks a lot

-- Reedyseth -- said...

Great, the links worked perfect !!

Anonymous said...

Works great thanks...
Karthik S

Den said...

Thanks for this quick and easy guide! Works great for me. Just one small point I was stumbling:
Instead of just copy&paste the code to the template, the list of brushes should be edited to the one actually needed. I was searching for a wile why the brush 'shell' wasn't working. And removing not needed brushes let the page load quicker (it is to slow any way ;-) ).

Nishant Rana said...

Hi,

I am sorry to ask but but somehow it's not working for me :-( any idea ? Is it because of change/update in scripthighlighter.

Shalabhsneha Katdare said...

@nishantcop: Its working on this page so it should work for you. I am using exactly the same instructions on this page :-)

Give it another shot and do it carefully.

Unknown said...
This comment has been removed by a blog administrator.
Power Point Presentations said...
This comment has been removed by a blog administrator.
Anonymous said...

Does this work for dynamic templates. It ain't on my blog.

Amol Kolte said...

Thanks a lot!!