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

Inline Updated

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


If you want to refer to a larger piece of code, use <pre> together with the <code> tag.

View example of the base code block


Code copyable should be used when presenting the user with a small snippet of code that they will likely want to copy and paste.

Warning:This pattern requires JS to be functional.

View example of the code copyable pattern


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


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

View example of the code numbered pattern


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