Code blocks
Code with colour and a copy button
HTML
button.html
<button type="button" class="btn btn-primary">
Save changes
</button>Code
<div class="code-block code-standalone">
<div class="code-title">
<span>button.html</span><button type="button" class="btn btn-ghost btn-icon btn-sm" aria-label="Copy code" data-copy-code><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
</div>
<pre><code><<span class="tok-tag">button</span> <span class="tok-attr">type</span>=<span class="tok-str">"button"</span> <span class="tok-attr">class</span>=<span class="tok-str">"btn btn-primary"</span>>
Save changes
</<span class="tok-tag">button</span>></code></pre>
</div>Settings
Using a theme
<html data-theme="dark" data-accent="teal">
<body>
<div class="card glass">Hello</div>
</body>
</html>Code
<div class="code-block code-standalone">
<div class="code-title">
<span>Using a theme</span><button type="button" class="btn btn-ghost btn-icon btn-sm" aria-label="Copy code" data-copy-code><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
</div>
<pre><code><<span class="tok-tag">html</span> <span class="tok-attr">data-theme</span>=<span class="tok-str">"dark"</span> <span class="tok-attr">data-accent</span>=<span class="tok-str">"teal"</span>>
<<span class="tok-tag">body</span>>
<<span class="tok-tag">div</span> <span class="tok-attr">class</span>=<span class="tok-str">"card glass"</span>>Hello</<span class="tok-tag">div</span>>
</<span class="tok-tag">body</span>>
</<span class="tok-tag">html</span>></code></pre>
</div>