Demo of X-rayHTML A little something to help build documentation pages
By default, functionality is hooked to the
data-xrayhtml attribute on without a value will give you inline code snippets, like so:
Use a heading element with an
xraytitle class to add your own subtitle to the example text.
Also works with a
data-title attribute but that approach is deprecated.
This is a paragraph with text.
class="antipattern" to show a bad example. Also works with subtitles as documented above.
Text is not a standard HTML element. Do not use this code.
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).
It's also possible to use an iframe for situations where styles (like
media queries) depend on the viewport. Specify the URL for the iframe
data-xrayhtml element. You can also tell XRay where in
the iframe page to place the included markup
data-xrayhtml-iframe-target="#replace". Otherwise it
will default to replacing the
body HTML with the code XRay