Code

µCode describes the styling of source code elements in µCSS: inline code (<code>), code blocks (<pre>), keyboard shortcuts (<kbd>), sample output (<samp>), and variables (<var>).

Usage #

An inline code fragment uses the <code> tag:

Use var(--mu-primary) for the primary color.

<p>Use <code>var(--mu-primary)</code> for the primary color.</p>

Inline code #

The <code>, <kbd>, <samp>, and <var> elements are displayed as inline-block with a colored background and border-radius:

The npm install command installs dependencies.

Press Ctrl + C to copy.

The program outputs Hello World.

Set x to the return value of getData().

<p>The <code>npm install</code> command installs dependencies.</p>
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>The program outputs <samp>Hello World</samp>.</p>
<p>Set <var>x</var> to the return value of <code>getData()</code>.</p>

Element	Background	Text color
`<code>`	`--mu-code-background-color`	`--mu-code-color`
`<samp>`	`--mu-code-background-color`	`--mu-code-color`
`<kbd>`	`--mu-code-kbd-background-color`	`--mu-code-kbd-color`
`<var>`	`--mu-code-background-color`	`--mu-code-color`

The <kbd> element uses a dark background and light text to visually stand out as a keyboard shortcut. The <var> element is rendered in italic to distinguish it from <code> and <samp>.

Variable #

Use <var> to represent a variable name in code or a mathematical expression. No class is needed — the styling applies directly to the element:

The area is w × h.

Set x to the return value of getData().

<p>The area is <var>w</var> &times; <var>h</var>.</p>
<p>Set <var>x</var> to the return value of <code>getData()</code>.</p>

The italic style distinguishes <var> from the other inline code elements:

Element	Semantic meaning	Italic
`<code>`	Code fragment	No
`<kbd>`	Keyboard input	No
`<samp>`	Program output	No
`<var>`	Variable or placeholder	Yes

Code block #

Wrap <code> inside <pre> for a code block with horizontal scrolling:

function hello() {
    console.log("Hello, World!");
    return true;
}

<pre><code>function hello() {
    console.log("Hello, World!");
    return true;
}</code></pre>

The block receives a padding of var(--mu-spacing) and overflow-x: auto to handle long lines.

Typographic properties #

All code elements use the theme's monospace font:

Property	Value
Font	`--mu-font-family` (monospace)
Size	`0.875em` (relative to parent)
Weight	`--mu-font-weight`
Border-radius	`--mu-border-radius`
Padding (inline)	`0.375rem`
Padding (block)	`var(--mu-spacing)`

Customization #

:root {
    /* Change inline code background */
    --mu-code-background-color: #f0f0f0;

    /* Change code text color */
    --mu-code-color: #333;

    /* Customize keyboard keys */
    --mu-code-kbd-background-color: #333;
    --mu-code-kbd-color: #fff;
}

Accessibility #

Use <code> for code fragments, <kbd> for keyboard input, <samp> for program output, and <var> for variables or placeholders.
Do not use <var> for general emphasis — use <em> instead.
Screen readers may announce <var> differently depending on the browser, helping distinguish it from surrounding code.