Bolt Design System

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>