Code

Usage

An inline code fragment uses the <code> tag:

<p>Utilisez <code>var(--mu-primary)</code> pour la couleur primaire.</p>

Inline code

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

<p>La commande <code>npm install</code> installe les dependances.</p>
<p>Appuyez sur <kbd>Ctrl</kbd> + <kbd>C</kbd> pour copier.</p>
<p>Le programme affiche <samp>Hello World</samp>.</p>

The <kbd> element uses a dark background and light text to visually stand out as a keyboard shortcut.

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:

Customization

:root {
    /* Changer le fond du code inline */
    --mu-code-background-color: #f0f0f0;

    /* Changer la couleur du texte de code */
    --mu-code-color: #333;

    /* Personnaliser les touches clavier */
    --mu-code-kbd-background-color: #333;
    --mu-code-kbd-color: #fff;
}