Pages

Awesome Code Syntax Highlighting in Blogger Post

Tuesday, November 12, 2013

If you want to share your code in the blog, you need to format the code snippet with proper syntax and highlighting. Blogger and Wordpress does not support code syntax highlighting by default. Fortunately an excellent open source and free code syntax highlighter tool called SyntaxHighlighter available in the web.

This is 100% JavaScript based SyntaxHighlighter tool to use in the web pages with out any dependency on other frameworks or third party tools. 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.



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 tag ends and just remove any lines for languages you don't use in your posts.

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 


How to Use?

The easiest way to use SyntaxHighlighting is to enclose the code within:
<pre class="brush:alias">tag.

######## YOUR CODE HERE ##########


Supported Languages for Syntax Highlighting


SyntaxHighter 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,  you can find a list of available aliases in the SyntaxHighlighter Aliases List.

NOTE: Before using a code syntax make sure that you have added the <script> tag for that syntax in the header.  

Happy Blogging :) :)

1 comment

  1. Every time i used to check blog posts here in the early hours in the break of day, for the reason that i enjoy to gain knowledge of more and more.
    website design

    ReplyDelete