code
Elements for displaying code, keyboard input, sample output, and variables in technical documentation.
Overview
Vanilla Breeze provides styling for several code-related elements:
<code>- Inline code snippets<pre>- Preformatted text blocks<kbd>- Keyboard input<samp>- Sample output<var>- Variables
Inline Code
Use the <code> element for inline code within text. It displays in a monospace font with a subtle background.
Use the console.log() function to debug your code.
The Array.prototype.map() method creates a new array.
Set display: flex on the container element.
When to Use Inline Code
- Function and method names
- Variable names
- CSS property names and values
- File names and paths
- HTML element and attribute names
- Command-line commands
Code Blocks
Wrap <code> inside <pre> for multi-line code blocks. The code element's background is removed when nested inside pre.
function greet(name) {
return `Hello, ${name}!`;
}
console.log(greet('World'));HTML Example
<article>
<h1>Article Title</h1>
<p>Article content goes here.</p>
</article>CSS Example
.button {
display: inline-flex;
align-items: center;
padding: var(--size-xs) var(--size-m);
border-radius: var(--radius-m);
background: var(--color-interactive);
color: white;
}Code Block with Horizontal Scroll
Long lines automatically enable horizontal scrolling.
const longVariableName = someFunction(parameter1, parameter2, parameter3, parameter4, parameter5, parameter6);Keyboard Input (kbd)
The <kbd> element represents keyboard input. It has a raised appearance like a physical key.
Press Ctrl + S to save.
Use Cmd + Shift + P to open the command palette.
Press Enter to submit the form.
Key Combinations
Copy: Ctrl + C (Windows) or Cmd + C (Mac)
Paste: Ctrl + V (Windows) or Cmd + V (Mac)
Undo: Ctrl + Z (Windows) or Cmd + Z (Mac)
Nested kbd for Key Sequences
Press Ctrl + X, then Ctrl + V to cut and paste.
Sample Output (samp)
The <samp> element represents sample output from a computer program.
The command returned: Hello, World!
Error message: File not found: config.json
Block Output
Terminal output:
$ npm install added 125 packages in 3.2s $ npm run build Build completed successfully. Output: dist/bundle.js (45.2 KB)
Variables (var)
The <var> element represents a variable in a mathematical expression or programming context.
The area of a circle is A = pi r2.
Let x equal the number of items.
The function returns result after processing.
Mathematical Formulas
Quadratic formula: x = (-b +/- sqrt(b2 - 4ac)) / 2a
Pythagorean theorem: a2 + b2 = c2
CSS Properties
Key Features
- Monospace font - All code elements use
var(--font-mono) - Nested code reset - Code inside pre loses its background and padding
- Keyboard styling - kbd has a border and shadow for a 3D key appearance
- Horizontal scroll - pre blocks scroll horizontally for long lines
Syntax Highlighting
For syntax highlighting, integrate a library like Prism.js or highlight.js. Vanilla Breeze provides the base styling; syntax highlighting adds color.
Integration Example
Accessibility
Best Practices
- Use semantic elements - Choose the right element for the content type
- Provide context - Introduce code blocks with explanatory text
- Label code language - Use class="language-*" to indicate the programming language
- Avoid code-only instructions - Don't rely solely on code formatting to convey meaning
Screen Reader Behavior
<code>- Usually read as regular text (monospace is visual only)<kbd>- Some screen readers announce "keyboard" or the key name<samp>- Read as regular text<var>- Usually read as regular text with italic emphasis
Keyboard Navigation
Code blocks with horizontal scroll should be keyboard accessible:
- Add
tabindex="0"to make scrollable pre focusable - Users can then use arrow keys to scroll
// This code block is keyboard focusable for scrolling
const example = "Users can tab to this block and use arrow keys to scroll horizontally if needed";