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.

Block

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

Preformatted block:

Preformatted code block:

Copyable

This component should be used when displaying a single line of code, accompanied by a copy icon, which allows users to copy the provided code to their clipboard.

Do:Use for single line terminal commands, functions or instructions.

Don't:Use for multiline code. If needed, code block should be used.

Functionality

Please copy the entire JS in the example, for copy to clipboard functionality.

Numbered

The code numbered pattern can be used when displaying large blocks of code to enable users to quickly reference a specific line.

Import

To import just code copyable or numbered component into your project, copy either or both snippets below and include it in your main Sass file.

@import 'patterns_code-copyable';
@import 'patterns_code-numbered';

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.

Design

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