Bolt Design System

Code Snippet Language

The Code Snippet will be syntax highlighted based on the chosen language.

Important Notes:

Only the languages listed in the schema are supported. Contact the Design System team to request additional language support.

Twig Code Snippets must be wrapped in {% verbatim %} tag or they will be parsed as code by Twig.

If you are using plain HTML, not the Twig template, you must manually escape HTML and Twig containing HTML or it will be parsed as code by the browser.

Demo

.my-css {
  display: block;
}

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

<p>Hello World!</p>

{% include '@bolt-components-banner/banner.twig' with {
  content: 'This is the banner content.'
} only %}

Twig

{% set css_code %}
.my-css {
  display: block;
}
{% endset %}

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

{% set html_code %}
<p>Hello World!</p>
{% endset %}

{% set twig_code %}
{# Twig does not allow nested verbatim tags, so the required verbatim tag placement for Twig language code snippets is shown in comments below #}
{# verbatim goes here #}
{% include '@bolt-components-banner/banner.twig' with {
  content: 'This is the banner content.'
} only %}
{# endverbatim goes here #}
{% endset %}

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

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

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

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

HTML

<div class="c-bolt-code-snippet" data-lang="css" data-mode="light">
<pre><code>.my-css {
  display: block;
}</code></pre>
</div>

<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="html" data-mode="light">
<pre><code>&lt;p&gt;Hello World!&lt;/p&gt;</code></pre>
</div>

<div class="c-bolt-code-snippet" data-lang="twig" data-mode="light">
<pre><code>{% include &#039;@bolt-components-banner/banner.twig&#039; with {
  content: &#039;This is the banner content.&#039;
} only %}</code></pre>
</div>