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

Tweet

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:

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:



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



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



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

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

Giving me +1 tells me you liked this article! Thanks in advance

Download the Free DNC Magazine for .NET Developers

About The Author

Suprotim Agarwal, ASP.NET Architecture MVP works as an Architect Consultant and provides consultancy on how to design and develop Web applications.

Suprotim is also the founder and primary contributor to DevCurry, DotNetCurry and SQLServerCurry. He has also written an EBook 51 Recipes using jQuery with ASP.NET Controls.

Follow him on twitter @suprotimagarwal