pre

Description

The <pre> element preserves whitespace and line breaks exactly as written in the HTML source. VB makes an important distinction:

• <pre><code> (code blocks) — Full treatment with background, padding, border-radius, and white-space: pre with horizontal scroll
• Bare <pre> (no <code> child) — Lighter treatment with pre-wrap and no background, for ASCII art, poetry, or other preformatted text that isn't code

This distinction uses pre:has(code) — no classes needed.

When to Use

• Code blocks: Wrap <code> inside <pre> for multi-line source code
• Terminal output: Wrap <samp> inside <pre> for command output
• ASCII art: Bare <pre> for art that depends on character alignment
• Poetry: Bare <pre> when line breaks are part of the content's meaning
• Data tables: Plain-text tabular data (though <table> is usually better)

When NOT to Use

• For indenting content — use CSS margins or layout elements
• For single-line code — use inline <code>
• For poetry with complex formatting — consider <p> with <br>

Examples

Code Blocks (pre + code)

The canonical pattern for displaying source code. VB detects the <code> child via pre:has(code) and applies full code-block styling:

Bold Highlighting in Code

<b> and <strong> inside code blocks get a subtle background highlight instead of relying on font weight alone:

Syntax Highlighting

For colored syntax highlighting, VB provides the <code-block> web component (used throughout this documentation site). For external tools, add class="language-*" to the <code> element and integrate Prism.js or highlight.js.

Terminal Output (pre + samp)

Use <samp> inside <pre> for command-line output. This gets code-block styling since samp behaves like code in this context:

Bare Pre (No Code Child)

Without a <code> or <samp> child, <pre> gets lighter styling — no background, no padding, and white-space: pre-wrap so long lines wrap rather than scroll. This is appropriate for ASCII art, poetry, and other preformatted text that isn't code.

CSS Reference

Print

Accessibility

• Screen readers read <pre> content in its linear order
• Add tabindex="0" to scrollable code blocks so keyboard users can scroll with arrow keys
• Add role="region" and aria-label for complex code blocks that benefit from a landmark
• ASCII art is inaccessible to screen readers — add aria-label or alt text describing what it depicts

Related

• <code> — Inline code and the required child for code blocks
• <samp> — Sample output inside pre for terminal patterns
• <kbd> — Keyboard input (often documented alongside code blocks)
• <b> — Bold highlighting inside code blocks
• <br> — Alternative for line breaks in non-preformatted poetry