Syntax highlighting

Bifrost ships a Prism theme as @intility/bifrost-css/dist/bifrost-prism.css. It styles standard Prism token classes using Bifrost CSS variables, so a single stylesheet covers both light and dark mode automatically.

Since we rely on bifrost variables, it will only work in a context where the bifrost CSS is loaded — for example, in a bifrost-react app, or any site that includes the Bifrost CSS.

Styled wrapper

The theme provides token colors plus basic typography (monospace font, white-space: pre, padding: 1em on <pre>). Background, border, and border-radius are intentionally left unset so you can supply your own — either wrap your code snippets in a suitable box, or add styling to the pre[class*="language-"] element directly, something like the following:

pre[class*="language-"] {
  background: var(--bfc-base-2);
  border: var(--bf-border);
  border-radius: var(--bf-radius);
  padding: var(--bfs8) var(--bfs16);
  margin-block: var(--bfs16);
  overflow-x: auto;
}

Using the theme

Import the stylesheet alongside Prism itself:

import "prismjs";
import "@intility/bifrost-css/dist/bifrost-prism.css";

All token classes Prism emits (.token.keyword, .token.string, .token.comment …) are styled out of the box.