Displays a piece of code neatly formatted: with syntax colours, a title bar, a copy button and optionally line numbers or a collapsible mode. Every code example on this site — including the one below — uses this block. The technical name is Code.
Use this block whenever you need to show a real snippet rather than describe it in prose — API examples, configuration files, terminal commands, or JSX snippets like the ones throughout this Block reference. The code stays as plain, copyable text under the hood; only the display is styled with syntax highlighting.
Line numbers help when you want to point readers to a specific line, and the collapsible mode keeps long files from dominating the page while still letting curious readers expand the full listing.
A common pattern: explain a feature in a paragraph, then follow it with a Code block containing the exact command or config a developer needs to copy — a shell install command, an environment variable, or a JSON config file.
When to reach for a code block
A documentation or knowledge-base page is the obvious home for this block, but it shows up in less obvious places too. A webshop might use it to document a webhook payload for integrators, a developer's portfolio might show an actual snippet from a featured project instead of just describing it, and an internal engineering page might use it to document an environment variable or CLI command a colleague needs to copy exactly. Wherever precision matters more than prose, a Code block beats a paragraph describing the same thing.
A frequent mistake is pasting formatted code straight into a rich-text paragraph instead of a Code block — manual line breaks and spacing get mangled, syntax highlighting is lost, and there's no copy button. Another is setting the wrong language value, which produces incorrect or no syntax highlighting; when in doubt, match it to the file extension (jsx, json, bash, text). Overusing the collapsible mode is a smaller but real mistake too — collapsing a snippet that's only five lines long just adds an extra click for no benefit; save it for listings long enough to otherwise dominate the page.
Because this Block reference explains its own JSX through Code blocks, it's a good example of the pattern: a short paragraph states what a prop does, followed immediately by a Code block showing the exact syntax. That same combination works well anywhere you're documenting configuration for developers — see the content-is-jsx knowledge-base article for how this site's own page content is written the same way.
The block outputs the snippet as selectable, copyable plain text with styling layered on top, so screen readers and browser find-in-page both work normally, and the copy button gives keyboard users a one-press way to grab a snippet without manually selecting text.
Example
const greeting = 'Hello Obelisk'; console.log(greeting);The prompt for this example
Put this piece of code on the page as a code block with line numbers and a copy button.