Code Block

Overview

The Code Block component comes with syntax highlighting and four 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 uses refractor and Prism for syntax highlighting. Most languages are supported - those that aren’t will fallback to general text syntax highlighting.

See Refractor’s readme for the full list of languages supported by this package (all languages in the list are supported - this package uses refractor/all).

The language must be passed to the Code Block component via the language prop in order for syntax highlighting to work.

For example:

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

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.

Primary (default)

Success

Danger

Warning

Title

The Code Block component supports arbitrary titles:

Code label

The Code Block component supports arbitrary code labels:

Props