Bifrost Design System

import Highlighter from "@intility/bifrost-react-highlighter";

Highlighter

Props

A syntax-highlighted code block with a Bifrost-styled header, copy button, and line-number gutter. Built on react-syntax-highlighter (Prism) and themed via Bifrost CSS variables so it follows the active color mode.

Install package

Run the following command to install:

Shell

npm install @intility/bifrost-react-highlighter

Include highlighter.css globally:

TypeScript

import "@intility/bifrost-react-highlighter/highlighter.css";

Import the component:

TypeScript

import Highlighter from "@intility/bifrost-react-highlighter";

Basic usage

Pass the source code as a string child and provide a Prism language identifier via the language prop.

TSX

<Highlighter language="typescript">{codeString}</Highlighter>

TypeScript

const greet = (name: string) => {
  return `Hello, ${name}!`;
};

console.log(greet("world"));

Language

Any Prism-supported language identifier works.

TSX

<Highlighter language="css">{cssCode}</Highlighter>
<Highlighter language="bash">{bashCode}</Highlighter>

CSS

.button {
  color: var(--bfc-base-c);
  padding: 0.5rem 1rem;
}

Bash

npm install @intility/bifrost-react-highlighter

Line numbers

Line numbers are shown by default. Use noLineNumbers to disable them.

TSX

<Highlighter language="javascript" noLineNumbers>
  {code}
</Highlighter>

JavaScript

const nums = [1, 2, 3].map((n) => n * 2);

The header shows the language label by default. Pass header to override it with a custom title — useful for showing a filename or other context.

TSX

<Highlighter language="typescript" header="greet.ts">
  {code}
</Highlighter>

greet.ts

const greet = (name: string) => {
  return `Hello, ${name}!`;
};

console.log(greet("world"));

Use noHeader to remove the entire header (both the title and the copy button).

TSX

<Highlighter language="css" noHeader>
  {code}
</Highlighter>

.button {
  color: var(--bfc-base-c);
  padding: 0.5rem 1rem;
}

Use noCopy to hide the copy button only.

TSX

<Highlighter language="typescript" noCopy>
  {code}
</Highlighter>

TypeScript

const greet = (name: string) => {
  return `Hello, ${name}!`;
};

console.log(greet("world"));

Line wrapping

By default long lines scroll horizontally. Use wrapLines to soft-wrap them to the container width instead.

TSX

<Highlighter language="typescript" wrapLines>
  {code}
</Highlighter>

TypeScript

const message = "This is a really long string that will overflow horizontally on narrow screens unless line wrapping is enabled.";