Code Snippets

Zirconium code snippets use prism.js to apply syntax highlighting to raw code snippets. The styling, however, is provided by the Zirconium stylesheet.

<pre class="code-snippet" data-prog-lang="html">
    <code>…</code>
</pre>

The data-prog-lang indicates the programming language of the code snippet. Under the hood, we are using Prism.js for syntax highlighting, plus a few plugins. Prism.js needs to see the .language-* class for it to work. Zirconium.js handles this for you, and adds a .language-* class depending on the value of the data-prog-lang attribute.

Copy to Clipboard

Using the Copy to Clipboard plugin, Prism.js automatically adds a Copy to Clipboard button that appears on hover. If you want this to work, be sure to add the Copy to Clipboard plugin, as well as the Toolbar plugin when downloading Prism.js.

Line Highlights

Using the Line Highlight plugin, we can indicate lines that we want to highlight in the code.

Use the data-line on the .code-snippet element with the line numbers, or ranges of line numbers you want to highlight.

<div class="button-group">
    <button class="button">Button 1</button>
    <button class="button">Button 2</button>
    <button class="button">Button 3</button>
</div>

<pre class="code-snippet" data-prog-lang="html" data-line="1,3"><code>
&hellip
</code></pre>