Demo of X-rayHTML A little something to help build documentation pages

Basics

By default, functionality is hooked to the data-xrayhtml attribute.

Inline

Bolting the data-xrayhtml attribute on without a value will give you inline code snippets, like so:

Flip

Setting “flip” as the value of the data-xrayhtml attribute will give you this snazzy flip-to-reveal animation (browsers without support for 3D tranforms will simply show/hide the code snippet).

Extras

The plugin fires off a create.xrayhtml event that can be used to attach features like a “copy to clipboard” option (using ZeroClipboard) or syntax highlighting (using Prism.js).

Prism.js