HTML Computercode

<!-- Inline code -->
<p>Run <code>npm install</code> to fetch dependencies.</p>

<!-- Block of code - <pre> preserves whitespace, <code> marks it as code -->
<pre><code>function add(a, b) {
  return a + b;
}
</code></pre>

<!-- Keyboard input -->
<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to stop the server.</p>

<!-- Sample output (what the program prints) -->
<p>The script outputs: <samp>hello, world</samp></p>

<!-- A variable name in mathematical or technical text -->
<p>Solve for <var>x</var> in <var>x</var><sup>2</sup> = 16.</p>

<!-- Long code block with syntax highlighting (via a JS library like Prism) -->
<pre><code class='language-javascript'>
const greet = (name) => \`hello, ${name}\`;
console.log(greet('world'));
</code></pre>

<style>
  code, kbd, samp, var, pre {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 0.95em;
  }
  code  { background: #f1f5f9; padding: 0.1em 0.3em; border-radius: 3px; }
  kbd   { background: #1f2937; color: white; padding: 0.1em 0.4em; border-radius: 4px; }
  samp  { color: #047857; }
  var   { font-style: italic; color: #b91c1c; }
  pre   { padding: 1rem; background: #0f172a; color: #e2e8f0; border-radius: 6px; overflow-x: auto; }
  pre code { background: transparent; padding: 0; color: inherit; }
</style>