@intility/bifrost-react-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.

Requires @intility/bifrost-react to be installed.

See the bifrost highlighter component documentation for full usage and examples.

Install

npm install @intility/bifrost-react-highlighter

Include highlighter.css globally:

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

Usage

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

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>;
}

Props

| Prop | Type | Description | | --------------- | --------- | --------------------------------------------------------------------- | | language | string | Prism language identifier (e.g. typescript, css, bash). | | header | string | Custom header title. Defaults to the language label. | | noHeader | boolean | Hide the entire header (title and copy button). | | noCopy | boolean | Hide the copy button only. | | noLineNumbers | boolean | Hide the line-number gutter. | | wrapLines | boolean | Soft-wrap long lines to container width instead of horizontal scroll. |

License

MIT © Intility AS