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

Dropdowns

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.

JavaScript functionality

When the code snippet contains dropdowns to switch the displayed code, the functionality of the dropdown menus needs to be provided via JavaScript. The contents of the code block should change based on the value selected in the dropdown. In a simpler case, there may be multiple code block elements in the code snippet component, but only one of them visible based on the user's choice in the dropdowns.

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

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

Class reference

React

You can use code snippet in React by installing our react-component library and importing code snippet component.

See the documentation for our React CodeSnippet component