How to create syntax highlighter using jQuery

Today I am going to show you how to create a basic code highlighter for website. This UI is actually inspired by sixrevisions.com. I have added functionality of showing line numbers.
Following things will be covered
How to add line numbersHow to highlight single line comments i.e. those lines which starts with //How to highlight comment blocks i.e. those lines which are enclosed within /* */
Live DemoDownload Code
To use this code highlighter you have to wrap your code inside <pre> tags. Really there is nothing new in it. It is the same traditional old method. <code> tag is another way of adding code into your post. However there is a difference between <pre> and <code> tag. To give analogy of their working I would give example of <div> and <span> respectively. This means <pre> is a block tag and <code> tag can be used inline.
One important thing we need to consider is, in WordPress if you want to post HTML code then you have to es…
Following things will be covered
How to add line numbersHow to highlight single line comments i.e. those lines which starts with //How to highlight comment blocks i.e. those lines which are enclosed within /* */
Live DemoDownload Code
To use this code highlighter you have to wrap your code inside <pre> tags. Really there is nothing new in it. It is the same traditional old method. <code> tag is another way of adding code into your post. However there is a difference between <pre> and <code> tag. To give analogy of their working I would give example of <div> and <span> respectively. This means <pre> is a block tag and <code> tag can be used inline.
One important thing we need to consider is, in WordPress if you want to post HTML code then you have to es…