Code Block
Styled container for displaying code snippets with header, language badge, and copy button
Code Block
Code blocks provide a styled container for displaying code snippets. They include a header with a language badge and optional title, a copy button, and a content area for the code.
Basic Usage
Wrap a <pre><code> block inside .code-block with a .code-header and .code-content area.
Basic Code Block
html
<button class="btn btn-primary">Click me</button> html
<div class="code-block">
<div class="code-header">
<span class="code-language">html</span>
</div>
<div class="code-content">
<pre><code><button class="btn btn-primary">Click me</button></code></pre>
</div>
</div>With Title
Add a .code-title span before the language badge to label the file or context.
Code Block with Title
App.jsx
jsx
export default function App() {
return <h1>Hello World</h1>;
} html
<div class="code-block">
<div class="code-header">
<span class="code-title">App.jsx</span>
<span class="code-language">jsx</span>
</div>
<div class="code-content">
<pre><code>export default function App() {
return <h1>Hello World</h1>;
}</code></pre>
</div>
</div>With Copy Button
Add a .copy-button inside the header for clipboard functionality.
Code Block with Copy Button
bash
npm install @duskmoon-dev/core html
<div class="code-block">
<div class="code-header">
<span class="code-language">bash</span>
<button class="copy-button">
<svg class="copy-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
<rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
<path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
</svg>
<span class="copy-text">Copy</span>
</button>
</div>
<div class="code-content">
<pre><code>npm install @duskmoon-dev/core</code></pre>
</div>
</div>Variants
Compact
Use .code-block-compact for reduced padding, suitable for inline or sidebar usage.
Compact Code Block
css
.btn { display: inline-flex; } html
<div class="code-block code-block-compact">
<div class="code-header">
<span class="code-language">css</span>
</div>
<div class="code-content">
<pre><code>.btn { display: inline-flex; }</code></pre>
</div>
</div>Borderless
Use .code-block-borderless to remove the outer border, useful when nesting inside other containers.
Borderless Code Block
js
const x = 42; html
<div class="code-block code-block-borderless">
<div class="code-header">
<span class="code-language">js</span>
</div>
<div class="code-content">
<pre><code>const x = 42;</code></pre>
</div>
</div>Multiple Languages
Code blocks work with any language label — the badge is purely informational.
Multiple Languages
styles.css
css
.card { border-radius: 0.5rem; }
index.ts
typescript
interface Props { title: string; } html
<div style="display: flex; flex-direction: column; gap: 1rem;">
<div class="code-block">
<div class="code-header">
<span class="code-title">styles.css</span>
<span class="code-language">css</span>
</div>
<div class="code-content">
<pre><code>.card { border-radius: 0.5rem; }</code></pre>
</div>
</div>
<div class="code-block">
<div class="code-header">
<span class="code-title">index.ts</span>
<span class="code-language">typescript</span>
</div>
<div class="code-content">
<pre><code>interface Props { title: string; }</code></pre>
</div>
</div>
</div>Best Practices
- Always include a
.code-languagebadge so users know the syntax - Use
.code-titlefor file names or descriptive labels - Keep code snippets focused — show only the relevant portion
- Use the compact variant for short, single-line examples
- The copy button should use the Clipboard API (
navigator.clipboard.writeText())
API Reference
CSS Classes
| Class | Description |
|---|---|
.code-block | Base container — border, radius, overflow hidden |
.code-header | Flex header row — background, border-bottom |
.code-title | Bold label (e.g., filename) — pushes siblings right |
.code-language | Uppercase language badge — muted color |
.copy-button | Ghost button — transparent bg, hover state |
.copy-icon | SVG icon inside copy button |
.code-content | Code area — surface background, overflow scroll |
.code-block-compact | Variant: reduced padding |
.code-block-borderless | Variant: no outer border |
Structure
<div class="code-block">
<div class="code-header">
<span class="code-title">filename.ext</span> <!-- optional -->
<span class="code-language">lang</span>
<button class="copy-button">...</button> <!-- optional -->
</div>
<div class="code-content">
<pre><code>...</code></pre>
</div>
</div>Related Components
- Markdown Body — full markdown typography including inline code and fenced blocks
- Card — general-purpose content container