Vanilla gives you multiple ways to display code using the standard HTML elements.
When you refer to code inline with other text, use the
code element can be nested within a
.p-strip--dark element, and can also use the
.is-dark utility class as necessary:
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 code block:
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
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.
<pre> elements do not wrap content, but this can be overridden by adding the
.is-wrapped utility class to a
language-* class names to the respective code blocks.
To correctly support numbered variant of code snippet the
keep-markup plug-in is needed to preserve
span elements around the lines.
spans with class names compatible with Prism theme (like
<span class="token keyword">
<span class="token comment">).
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. ```
Main element of the code snippet component.
Bordered variant, to be used when additional content (such as iframes) is used inside the code snippet component.
Code block without any additonal styling elements.
Code block with wrapped content in lines.
Code block that starts with an icon. Default icon is a UNIX prompt. To be used with Linux CLI examples.
.p-code-snippet__block--icon to use a Windows prompt icon. To be used with Windows CLI examples.
.p-code-snippet__block--icon to use a link icon. To be used with URLs.
Code block with numbered lines of code (to be used with longer pieces of code examples). Requires
A wrapper around single line of code. Needed with numbered variant of a code block.
Code block header
A header of a code block. Contains a title and optional dropdowns.
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
The title of a code block.
The container element for any dropdowns in the header.
An individual dropdown in code block header.
You can use code snippet in React by installing our react-component library and importing code snippet component.