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:

Add a subtitle

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.

Paragraph

This is a paragraph with text.

Anti-patterns and Bad Examples

Add class="antipattern" to show a bad example. Also works with subtitles as documented above.

Non-standard HTML

Text is not a standard HTML element. Do not use this code.

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

iframe

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 with data-xrayhtml-iframe="iframe.html" on the data-xrayhtml element. You can also tell XRay where in the iframe page to place the included markup using data-xrayhtml-iframe-target="#replace". Otherwise it will default to replacing the body HTML with the code XRay code snippet.