Code Snippet

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

Published Last updated: 5.3.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 @bolt/elements-icon clipboard prismjs