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
Tweet
About The Author
3 comments:
hmmm...i think broken link for snippet.min.js
pliss fixed my friend...hihihi
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]
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.
Post a Comment