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/utils';
Dark
import { props } from '@bolt/core/utils';
Twig
{% set code_snippet %}
import { props } from '@bolt/core/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/utils';</code></pre>
</div>