Code

Inline code and code blocks for displaying programming content.

Inline Code

Use the <code> element for inline code snippets:

Use the console.log() function to debug.

The --color variable controls text color.

<p>Use the <code>console.log()</code> function to debug.</p>
<p>The <code>--color</code> variable controls text color.</p>

Code Blocks

Wrap <code> in <pre> for multi-line code blocks:

<pre><code>function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('World'));</code></pre>

Keyboard Input

Use <kbd> for keyboard shortcuts:

Press Ctrl + C to copy.

Use Cmd + V to paste on Mac.

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy.</p>
<p>Use <kbd>Cmd</kbd> + <kbd>V</kbd> to paste on Mac.</p>

Sample Output

The program outputs: Hello, World!

<p>The program outputs: <samp>Hello, World!</samp></p>

Variables

The area of a circle is πr2.

<p>The area of a circle is <var>π</var><var>r</var><sup>2</sup>.</p>