I finally released jQuery.viewSource – a jQuery plugin to show the HTML source of current web page, or just a HTML snippet from a page. This is useful for web pages which include HTML/JS/CSS examples and such.
As you can see from the image, the plugin can also highlight the HTML, using google-code-prettify script. You have to include the prettify script and CSS to the page yourself.
There are just two methods:
- Add $(someselector).viewSource(code-to-show-selector); to document.ready() method. This will bind the click event to the element(s) specified by your jQuery selector – i.e. clicking on those elements will show the source.
- Call $().showSource(code-to-show-selector); yourself to immediately show the source.
Note: "code-to-show-selector" is optional selector for the element which code to show. If left empty or passed an empty string, it will default to "html", ie. the whole page.
Download includes both minified and normal version of the script, along with a barebones example. jQuery.viewSource is licenced under Mozilla Public Licence 1.1.