Code Markup — pre, code, kbd, samp, var

<!-- Inline code — runs of source code within prose -->
<p>The <code>map()</code> method returns a new array.</p>

<!-- Block of code — combine <pre> (preserve whitespace) + <code> (semantics) -->
<pre><code class="language-js">const sum = nums.reduce((a, b) =&gt; a + b, 0);
console.log(sum);</code></pre>

<!-- Keyboard input — what the user should press -->
<p>Save your file with <kbd>Ctrl</kbd>+<kbd>S</kbd>
   (or <kbd>⌘</kbd>+<kbd>S</kbd> on macOS).</p>

<!-- Sample output from a program / system -->
<p>If everything went well, you should see
   <samp>HTTP/1.1 200 OK</samp> in the response.</p>

<!-- A variable in math or pseudocode -->
<p>The complexity is <var>O(n log n)</var> where
   <var>n</var> is the input size.</p>

<!-- Output of a calculation (form result, JS computed value) -->
<form oninput="result.value = parseInt(a.value) + parseInt(b.value)">
    <input type="number" id="a" value="1"> +
    <input type="number" id="b" value="2"> =
    <output name="result" for="a b">3</output>
</form>

<style>
code, kbd, samp, pre, var { font-family: ui-monospace, SFMono-Regular, monospace; }
:not(pre) > code { background: #f3f4f6; padding: 1px 5px; border-radius: 4px; }
kbd { background: #fff; border: 1px solid #d1d5db; border-bottom-width: 2px;
      padding: 1px 6px; border-radius: 4px; font-size: 0.85em; }
pre  { background: #1e293b; color: #f3f4f6; padding: 14px 18px;
       border-radius: 8px; overflow-x: auto; }
var  { font-style: italic; color: #6366f1; }
</style>