Bolt Design System

Basic Code Snippet

Code Snippet displays a block of syntax highlighted code with support for several programming languages. See schema for all language options.

Important Notes:

The component is only intended for code blocks. If you need to display code inline, simply use the HTML <code> element.

Use Twig whenever possible, but if you must use HTML, be sure to do the following to work with standard HTML behaviors:

Trim leading and trailing whitespace inside the <code> element to remove any undesired indents or whitespace.

Certain special characters (such as &, <, and >) must be converted to HTML entities.

Demo

Light

import { props } from '@bolt/core-v3.x/utils';

Dark

import { props } from '@bolt/core-v3.x/utils';

Twig

{% set code_snippet %}
import { props } from '@bolt/core-v3.x/utils';
{% endset %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: code_snippet,
  lang: 'javascript',
} only %}

HTML

<div class="c-bolt-code-snippet" data-lang="js" data-mode="light">
<pre><code>import { props } from '@bolt/core-v3.x/utils';</code></pre>
</div>