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:

Example

<aside>
		<blockquote>
			<p>It is the unofficial force—the Baker Street irregulars.</p>
		</blockquote>
		<address>Sherlock Holmes</address>
		<cite>Sign of Four</cite>
	</aside>

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.

Example: Paragraph

This is a paragraph with text.


<p>This is a paragraph with text.</p>

Anti-patterns and Bad Examples

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

Do Not Use: Non-standard HTML

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


<text><code>Text</code> is not a standard HTML element. Do not use this code.</text>

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).

View Source

Example

<aside>
	<blockquote>
		<p>It is the unofficial force—the Baker Street irregulars.</p>
	</blockquote>
	<address>Sherlock Holmes</address>
	<cite>Sign of Four</cite>
</aside>

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

Example

<aside>
		<blockquote>
			<p>It is the unofficial force—the Baker Street irregulars.</p>
		</blockquote>
		<address>Sherlock Holmes</address>
		<cite>Sign of Four</cite>
	</aside>

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.

Example
<aside>
	<blockquote>
		<p>It is the unofficial force—the Baker Street irregulars.</p>
	</blockquote>
	<address>Sherlock Holmes</address>
	<cite>Sign of Four</cite>
</aside>