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>