Jump to main content

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.

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


Root element

.p-code-snippet

Main element of the code snippet component.


&.is-bordered

Bordered variant, to be used when additional content (such as iframes) is used inside the code snippet component.


Code block

.p-code-snippet__block

Code block without any additonal styling elements.


&.is-wrapped

Code block with wrapped content in lines.


.p-code-snippet__block--icon

Code block that starts with an icon. Default icon is a UNIX prompt. To be used with Linux CLI examples.


&.is-windows-prompt

Changes the .p-code-snippet__block--icon to use a Windows prompt icon. To be used with Windows CLI examples.


&.is-url

Changes the .p-code-snippet__block--icon to use a link icon. To be used with URLs.


.p-code-snippet__block--numbered

Code block with numbered lines of code (to be used with longer pieces of code examples). Requires .p-code-snippet__line.


Code line

.p-code-snippet__line

A wrapper around single line of code. Needed with numbered variant of a code block.


Code block header

.p-code-snippet__header

A header of a code block. Contains a title and optional dropdowns.


&.is-stacked

A stacked version of a header (with a title displayed above the dropdowns). To be used when there are multiple dropdowns with a long title.


Code block title

.p-code-snippet__title

The title of a code block.


Dropdowns container

.p-code-snippet__dropdowns

The container element for any dropdowns in the header.


Dropdown

.p-code-snippet__dropdown

An individual dropdown in code block header.

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