Code Block

Overview

The Code Block component comes with syntax highlighting and five color variants to visually communicate different statuses or contexts:

• Neutral: The default style, suitable for general blocks of code.
• Primary: Alternate style, general highlight.
• Warning: Highlights code that may have caveats, edge cases, or requires extra attention.
• Danger: Highlights code that can cause errors or undesirable outcomes.
• Success: Highlights recommended or preferred code patterns.

Usage

Import the component:

import { CodeBlock } from "@eqtylab/equality";

code is a required prop and should be set to the string of code you want to appear within the code block. Set the code language by using the language prop.

For example:

const code = `
console.log('Hello, world!');
`;

<CodeBlock language="js" code={code} />;

neutral is the default variant. Select another by using the variant prop, for example:

<CodeBlock title="Error" variant="danger" language="js" code={code} />

Code Language Support

The Code Block component highlights with MicroLighter , which reads TextMate grammars and paints them through the CSS Custom Highlight API . Grammars load on demand, so a page only pays for the languages it actually renders.

The language must be passed via the language prop for syntax highlighting to work. Anything unrecognised — including the text default — renders as unstyled monospace text. For a full list of supported languages, see Microliter’s readme.

<CodeBlock language="json" code={code} />

Highlighting Your Own Markup

If you render code outside this component — a diff view or an editor, say — CODE_BLOCK_ATTRIBUTE and scheduleHighlight opt that markup into the same pass, so it picks up the same palette:

import { useEffect, useRef } from "react";

import { CODE_BLOCK_ATTRIBUTE, scheduleHighlight } from "@eqtylab/equality";

const ref = useRef<HTMLPreElement>(null);

useEffect(() => {
  void scheduleHighlight(ref.current?.getRootNode());
}, [source]);

<pre ref={ref} {...{ [CODE_BLOCK_ATTRIBUTE]: "" }}>
  <code className="language-rust">{source}</code>
</pre>;

The <code> element must only contain text — a block that wraps its lines in markup is skipped. Call scheduleHighlight again whenever the code changes or the block is removed; calls made in the same frame are coalesced, so calling it freely is fine.

Pass the block’s root, pre.getRootNode(). If left out, the pass covers the document, which cannot see into a shadow root. A block inside a shadow root also needs the palette adopted into that root, since the component’s stylesheet only reaches the document. Highlighting a shadow root clears the colours on the document’s blocks and the reverse, so for now the two cannot both stay highlighted.

Line Numbers

Set lineNumbers to number every line in a gutter beside the code. The gutter is sticky, so the numbers stay in place while long lines scroll under them.

Numbering and wrapping are mutually exclusive: a wrapped line occupies more rows than its number does, which would drift the two columns apart. Setting lineNumbers therefore switches long lines from wrapping to scrolling horizontally.

Color Variants

Code blocks support color variants using either the brand primary color or status options. Available variants are neutral, primary (brand primary color), success, danger, and warning. Use these to visually distinguish different types of code or contexts according to your design needs.

Neutral (default)

Success

Danger

Warning

Title

The Code Block component supports arbitrary titles:

Code Label

The Code Block component supports arbitrary code labels:

Props