code snippet docs

Code Snippet

Text container that displays syntax-highlighted code with support for several programming languages.

Published Last updated: 4.4.0 Change log Github NPM
Twig Usage 
{% set code_snippet %}
<h1>Hello world!</h1>
<p>This is a code snippet.</p>
{% endset %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: code_snippet,
  lang: 'html',
} only %}
 Schema
Note: when assigning component props as HTML attributes on a web component, make sure to use kebab-case.
Prop Name Description Type Default Value Option(s)
attributes

A Drupal-style attributes object with extra attributes to append to this element.

 object —
  • —
content

Content of the code snippet.

 any —
  • —
lang

Code language of the content. Each language comes with its unique syntax highlights.

 string none
  • none, markup, html, xml, svg, mathml, ssml, atom, rss, javascript, js, clike, css, scss, twig, java, json, rest, bash, shell, csv, docker, dockerfile, http, jsx, tsx, md, markdown, yml, yaml
custom_lang_label

Custom language label. Only use this if the actual language label is not desired.

 any —
  • —
mode

Toggle between light and dark syntax highlights, or turn it off. This works independently of Bolt color themes.

 string light
  • light, dark, none
hide_copy

Hide copy to clipboard from the code snippet header.

 boolean —
  • —
hide_lang_label

Hide the language label from the code snippet header.

 boolean —
  • —
Install Install 
npm install @bolt/components-code-snippet
Dependencies @bolt/core-v3.x clipboard prismjs

code snippet

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>

code snippet language

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>

code snippet mode

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>

code snippet custom language label

Code Snippet Custom Language Label Customize the language label shown with your Code Snippet. Important Notes: Pass a custom language label with the custom_lang_label prop or the data-custom-lang-label attribute if using HTML. Only use a custom label if the default label is not desired. Demo 
$ echo "Hello World"
Twig
{% set code_snippet %}
$ echo "Hello World"
{% endset %}

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: code_snippet,
  lang: 'bash',
  custom_lang_label: 'Terminal',
} only %}
HTML
<div class="c-bolt-code-snippet" data-lang="bash" data-mode="light" data-custom-lang-label="Terminal">
<pre><code>$ echo "Hello World"</code></pre>
</div>

code snippet header display

Code Snippet Header Display Language title and copy to clipboard button are shown by default but can be turned off individually. Important Notes: If using Twig, use hide_lang_label and hide_copy props to hide one or both of these Code Snippet header items. If using HTML, use the data-hide-lang-label and data-hide-copy attributes. Demo 
.my-css {
  display: block;
}
.my-css {
  display: block;
}
.my-css {
  display: block;
}
Twig
{% set code_snippet %}
.my-css {
  display: block;
}
{% endset %}

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

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

{% include '@bolt-components-code-snippet/code-snippet.twig' with {
  content: code_snippet,
  lang: 'css',
  hide_lang_label: true,
  hide_copy: true,
} only %}
HTML
<div class="c-bolt-code-snippet c-bolt-code-snippet--light" data-lang="css" data-hide-lang-label>
<pre><code>.my-css {
  display: block;
}</code></pre>
</div>

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

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