Code


Vanilla gives you multiple ways to display code using the standard HTML elements.

Inline

When you refer to code inline with other text, use the <code> tag.

An inline code element can be nested within a .p-strip--dark element, and can also use the .is-dark utility class as necessary:

Block

To create a pre-formatted block, use either <pre> (where preserving white space is important, but the text is not necessarily code) or <pre><code> (to indicate the contents are a piece of code):

Pre-formatted block:

Pre-formatted code block:

Code snippet

The code snippet pattern should be used to group related code examples, making them easier to find and understand. It should consist of one or, at most, two code blocks with optional headers for their titles.

Code snippet with icon

A code snippet block can include an icon by using the .p-code-snippet__block--icon class. By default, it will show the Linux prompt icon, but other icon options are available, using the .is-windows-prompt or .is-url classes.

Numbered code snippet

A select with the class .p-code-snippet__dropdown can be included within a .p-code-snippet__header, with a small amount of JS to switch between related code examples.

It is also possible to include multiple selects, and an alternative layout is available by adding the .is-stacked utility to the .p-code-snippet__header, should more horizontal space be required.

Wrapping

By default, <pre> elements do not wrap content, but this can be overridden by adding the .is-wrapped utility class to a .p-code-snippet__block:

Syntax highlighting

We recommend using Prism for syntax highlighting in the code snippet. Vanilla framework provides a built-in Prism theme, so only JavaScript of Prism library needs to be added to the page, and language-* class names to the respective code blocks.

Make sure to include language support for any required languages or the autoloader plug-in (that automatically loads needed languages based on used class names).

To correctly support numbered variant of code snippet the keep-markup plug-in is needed to preserve span elements around the lines.

JavaScript for Prism can be downloaded from their download page where it can be bundled with any necessary languages and plug-ins. You can also use Prism provided by CDN.

To avoid using JavaScript library for syntax highlighting you can prepare the code block content by manually wrapping the highlighted elements into spans with class names compatible with Prism theme (like <span class="token keyword"> <span class="token comment">).

Bordered

New

Add the class .is-bordered to the .p-code-snippet element to visually group the code snippet with another section, for instance the rendered result of the code in the snippet. ```

Copyable

Deprecated

The code copyable element is now deprecated and will be removed in a future version of Vanilla.

It is being replaced by the new code snippet pattern.

Numbered

Deprecated

The code numbered pattern is now deprecated and will be removed in a future version of Vanilla.

It is being replaced by the new code snippet pattern.

Design

For more information view the code design spec, which includes the specification in markdown format and a PNG image.