Code and keys

Code uses Monaspace Neon, the same font as body text. Use these classes for code blocks and keyboard shortcuts.

Code block

Add code-block to <pre> for a recessed background and horizontal scrolling. Remove the syntax highlighter's background so the block's background shows.

import "@bruhs/theme/styles/index.css";

const fruit = ["lychee", "persimmon", "durian"];

<pre class="code-block"><code>import "@bruhs/theme/styles/index.css";

const fruit = ["lychee", "persimmon", "durian"];</code></pre>

Inline code

Use code-inline within a paragraph. It inherits the surrounding text size.

<p class="text-body text-rambutan-300">
  Run <code class="code-inline">pnpm check</code> before you push.
</p>

Keys

Add kbd to each <kbd> element. Use one element per key.

<span class="flex items-center gap-1 text-body-sm text-rambutan-400">
  <kbd class="kbd">⌘</kbd><kbd class="kbd">K</kbd> to search
</span>