Bolt Design System

Code Snippet Syntax Highlights

Choose from two modes of syntax highlights, light or dark.

Important Notes:

When using HTML, make sure to use either the [data-mode="light"] or [data-mode="dark"] attribute. Otherwise, there will be no syntax highlighting.

Mode works independently of Bolt color themes.

Demo

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

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 %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: code_snippet,
  lang: 'javascript',
  mode: 'dark',
} 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>
<div class="c-bolt-code-snippet" data-lang="js" data-mode="dark">
<pre><code>import { props } from '@bolt/core-v3.x/utils';</code></pre>
</div>