jQuery: Highlight Source Code in HTML and ASP.NET Pages

I recently stumbled upon the Snippet plugin which is a syntax highlighting plugin and provides a quick and easy way of highlighting source code passages in HTML documents. I needed a similar implementation for displaying source code (with syntax highlighting and copy), while generating some documentation for a product.

Let us see how to implement this plugin in an ASP.NET page. You can easily replicate this on a HTML page at your end.

Download the snippet.min.js and snippet.min.css and keep it in the Scripts and CSS folder respectively. Then reference these files in your aspx/html page, along with a reference to the jQuery file, as shown below:

jQuery Highlight code

Now declare a <pre> element in your page which contains the source code. I have specified a ‘code’ class for this element. You can call it anything you want:

jquery syntax highlight

The final step is to call Snippet on this <pre> element, as shown below

jQuery Snippet highlight

That’s it. Browse the page and check the syntax highlighted code, as shown below:

image

I have used the “csharp” language with a “bright” style. There are several other languages and parameters supported, as shown below.

image

You can also provide clipboard support to the code by using the ZeroClipboard file. Find more details on implementing the clipboard functionality over here





About The Author

Suprotim Agarwal
Suprotim Agarwal, Developer Technologies MVP (Microsoft Most Valuable Professional) is the founder and contributor for DevCurry, DotNetCurry and SQLServerCurry. He is the Chief Editor of a Developer Magazine called DNC Magazine. He has also authored two Books - 51 Recipes using jQuery with ASP.NET Controls. and The Absolutely Awesome jQuery CookBook.

Follow him on twitter @suprotimagarwal.

3 comments:

Beben Koben said...

hmmm...i think broken link for snippet.min.js
pliss fixed my friend...hihihi

Anonymous said...

this small thing my chrome always do whenever i need to use syntax highlighting.

just open the js file in chrome and they work fine.

well who need this feature only programmer why they not use alex syntax hightlighing whenever they really want to use syntax highlighting

this post show that most of garbage [useless] stuff you produce in the thing of got something new [no problem that it is useless]

Suprotim Agarwal said...

Beben: Thanks! Links fixed :)

Anonymous: As mentioned in my post, this plugin was used to show code with color syntax, in a documentation created for a product. Users are free to explore alternative ways of using this plugin.