A little something to help build documentation pages.
Instead of dropping in a block of markup to render as a demo, then copying and pasting it into a pre
/code
block, then escaping it—then going back and updating both the rendered code and the escaped code should something change: now you just wrap the code you’re rendering in a div
and it generates a copy/pastable source snippet. Credit to @ugomobi for the original idea, which is in use on the jQuery Mobile docs.
The second demo uses the plugin’s “create” event (create.view-source
by default, but configurable) to bolt on the Prism.js syntax highlighter, the third demo uses ZeroClipboard to add a quick “copy to clipboard” button, and the last demo uses both.
Download the production version or the development version, and the structural CSS.
In your page:
<script src="jquery.js"></script>
<script src="X-rayHTML.min.js"></script>
and
<link href="X-rayHTML.css" rel="stylesheet">
There are some config options up at the top of X-rayHTML.js
:
var o = {
pluginName: "view-source",
text: {
open: "View Source",
close: "View Demo"
},
classes: {
button: "btn btn-small",
open: "view-source",
sourcepanel: "source-panel"
},
initSelector: ".source"
}
By default, functionality is hooked to the class source
. A pre
/code
block gets dropped into place, so whitespace inside of .source
counts the same way. For example:
<div class="source"><aside>
<blockquote>
<p>It is the unofficial force—the Baker Street irregulars.</p>
</blockquote>
<address>Sherlock Holmes</address>
<cite>Sign of Four</cite>
</aside></div>