Highlighter

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

1. Run the following command to install:

npm install @intility/bifrost-react-highlighter

2. Include highlighter.css globally:

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

3. Import the component:

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.

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

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

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

Language

Any Prism-supported language identifier works.

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

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

npm install @intility/bifrost-react-highlighter

Line numbers

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

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

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

Header

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.

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

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).

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

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

Use noCopy to hide the copy button only.

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

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.

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

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

Sandbox

import { useState } from "react";
import Highlighter from "@intility/bifrost-react-highlighter";
import "@intility/bifrost-react-highlighter/highlighter.css";

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

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

export default function HighlighterDemo() {
  return <Highlighter language="typescript">{code}</Highlighter>;
}