code

Elements for displaying code, keyboard input, sample output, and variables in technical documentation.

Overview

Vanilla Breeze provides coordinated styling for code-related elements. All share var(--font-mono) and are automatically excluded from machine translation via the i18n system.

  • <code> — Inline code snippets
  • <pre> — Preformatted text blocks
  • <kbd> — Keyboard input
  • <samp> — Sample output
  • <var> — Variables

Inline Code

Use <code> for inline code within text. It displays in a monospace font with a subtle background.

When to Use Inline Code

  • Function and method names
  • Variable and property names
  • CSS property-value pairs
  • File names and paths
  • HTML element and attribute names
  • Command-line commands

Code Blocks

Wrap <code> inside <pre> for multi-line code blocks. VB distinguishes between <pre><code> (full code block treatment with background, padding, border-radius) and bare <pre> (lighter treatment for ASCII art, poetry).

Bold in Code

Inside <code> and <pre>, <b> and <strong> get a subtle highlight background instead of relying on font weight alone. This is more visible in monospace fonts where weight differences can be subtle.

Keyboard Input (kbd)

The <kbd> element represents keyboard input. It has a raised appearance like a physical key, with border and box-shadow.

Sample Output (samp) and Variables (var)

<samp> represents sample output from a program. <var> represents a variable in a mathematical or programming context — styled in italic with var(--color-interactive) to distinguish it from general italic text.

CSS Reference

Key Features

Feature Implementation
Monospace font All code elements use var(--font-mono)
Nested code reset code inside pre loses background and padding
pre:has(code) vs bare pre Code blocks get full treatment; bare pre gets light styling
Bold highlight b/strong in code get background color instead of weight
Keyboard styling kbd has border + shadow for 3D key appearance
Variable accent var uses --color-interactive to distinguish from em
Translation protection All code elements set translate: no

Translation Protection

VB's i18n system automatically sets translate: no on all code-family elements, preventing browser or machine translation from breaking code content:

Accessibility

Screen Reader Behavior

  • <code> — Read as regular text (monospace is visual only)
  • <kbd> — Some screen readers announce "keyboard" or the key name
  • <samp> — Read as regular text
  • <var> — Read as regular text with italic emphasis

Best Practices

  • Use the right element for the content type
  • Introduce code blocks with explanatory text
  • Use class="language-*" to indicate the programming language
  • Add tabindex="0" to scrollable <pre> for keyboard accessibility

Related

  • <b> / <strong> — Bold highlighting inside code blocks
  • <data> — Machine-readable data values (styled with var(--font-mono))
  • <abbr> — Abbreviations in code documentation
  • Internationalization — Translation protection for code elements
↑