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