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 %}{% verbatim %}
{% include '@bolt-components-banner/banner.twig' with {
  content: 'This is the banner content.'
} only %}{% endverbatim %}{% 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>