How to add code syntax highlighting to blogger posts

Friday, July 29, 2011

Tweet

When you blog on small technical things involving HTML or other code example, it is nice to show the code with syntax highlighting. There are few Javascript solutions available.  "Syntax highlighter" is the most popular and stable approach. Here are the simple steps to add it to your blogger blog.
If you encounter any questions or issues do have a look at the FAQ at the end of the post.

• Log into your blogspot account, select the "Layout" tab, and then click "Edit HTML."
• Click "Download Full Template" to make a backup of your current template. (In case you ended up messup upload the backup copy again :-) )
• Make a copy of your template, open it in an editor (Or you may do it on line), and find the </head> closing tag. Before that tag, add the following:

<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'/>
<!-- add brushes here -->
<script type='text/javascript'>
  SyntaxHighlighter.config.bloggerMode = true;
  SyntaxHighlighter.all();
</script>

After the comment that says "add brushes here," add the languages you plan to use. For example, I'm using brushes for Javascript, SQL, XML/HTML, and Java:

<!-- add brushes here -->
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.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/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/shBrushCpp.js' type='text/javascript'/>

• See the full list of supported syntaxes.
• Save your modified template, and upload it to Blogger (again, under Layout > Edit HTML).
• You should now be able to add syntax highlighting to your blog. Wrap your code in a <pre> tag and specify the brush to use in the class attribute. For example, to highlight a block of SQL:
  
  <pre class="brush:sql">
  SELECT *
  FROM users
  WHERE user_id = 1212;
  </pre>
  
  Here's how that looks when rendered:

SELECT *
  FROM users
 WHERE user_id = 1212;

Note 1: If you are adding especially HTML/Javascript content, it is very important that you encode your code before add it inside <pre class="brush:xml">..</pre> tags. Otherwise, you will get a error when you save/publish the content. Read more on how to encode/escape HTML content here...

Note 2: Brush types are case sensitive. For example brush:xml will work but not brush:Xml

FAQ:
Q: Does this cross browser compatible?
A: Yes its javascript solution that in general work well in all the browsers.

Q: Is it posible for user to copy tha plain code?
A: Yes. Double clicking the code area will select all the code. Now user has to use Ctrl + C or Right menu option 'copy'

Q: I want to add HTML/Javascript content in the blog post, what should be the brush type?
A: You must use <pre class="brush:xml">

Q: In some solutions, I have seen copy and view links next to the code. Why those links are not available here.
A: It had been implemented using Flash technology. Because web community is now moving away from Flash, that approach has been discontinued by popular request of web developers to make this solution neutral. Read more on this here ....

Q: Can I choose different themes?
A: Yes, there are set of themes to be selected to match your blog theme. Find them here....