Embed Code in Blog and Webpages with Syntax Highlighting

Ever wondered how one can embed code in blogs and web pages with language specific highlighting? Let's hit ground directly. It is a cakewalk by using js based open source Syntax Highlighter developed by Alex Gorbatchev.

Here We'll talk about embedding code with language specific syntax highlighting in blogger/blogspot. But it is pretty straight forward to do the same in any web page.

Setup Syntax Highlighter for Blogger

1. Open template layout for editing in 'Edit Html' mode.
2. Add following lines of code in head section (just before closing head tag </head>)
   

<!-- Adding Syntax Highlighter -->

<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'/>

<!-- language specific brushes (js files) go here -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJava.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/shBrushPhp.js' type='text/javascript'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.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/shBrushSql.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/shBrushPerl.js' type='text/javascript'/>

<!-- Adding Syntax Highlighter Ends Here -->

//enabling syntax highlighter for blogger
<script type='text/javascript'>
SyntaxHighlighter.config.bloggerMode = true;
SyntaxHighlighter.all();
</script>

3. Save template and you are done with setting up syntax highlighter for your blogger!
   

Writing Post with Syntax Highlighting
Open editor in "Edit Html" mode and wrap code in language specific pre tags

1. SQL Example
   
   <pre class="brush:sql">
   CREATE TABLE login_detail(user_id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
   email VARCHAR(255) NOT NULL UNIQUE,
   password VARCHAR(255) NOT NULL,
   user_type VARCHAR(10),
   active CHAR(1) NOT NULL DEFAULT 'Y');
   </pre>

Result:


CREATE TABLE login_detail(user_id INT NOT NULL AUTO_INCREMENT PRIMARY KEY,
email VARCHAR(255) NOT NULL UNIQUE,
password VARCHAR(255) NOT NULL,
user_type VARCHAR(10),
active CHAR(1) NOT NULL DEFAULT 'Y');

2. Javascript Example
   
   <pre class="brush:js">
   <script type="text/javascript">
   // The Vehicle class
   Vehicle={
   wheels:2,
   setWheels:function(x){
   this.wheels=x
   },
   getWheels:function(x){
   return this.wheels
   }
   };
   </script>
   </pre>
   
   Result:
   
   
   

** Don't forget doing HTML encoding of text for getting properly formatted HTML.
HTML Encoder 1
HTML Encoder 2