Code Snippet

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

Published Last updated: 5.0.1 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