Types

highlight()

function highlight(
  code: string,
  language: BundledLanguage,
  theme?: Theme,
): string;

This function will take in your code and highlight it with the theme that you give it.

code: The code to be highlighted.

language: The programming language that the code is in. The list of supported languages can be checked with either the BundledLanguage type or the bundledLanguages array.

theme: The code theme for syntax highlighting. Without it, the output will not be highlighted, though you can use the <span> elements' class names with a CSS file instead, since the class names are those elements' syntax types, like function or string.

import { highlight } from "@noclaps/highlight";

const code = `print("Hello World")`;
highlight(code, "python");
// <pre><code><span>...</span></code></pre>

BundledLanguage

The type of all programming languages supported by Highlight. You can use this to type-check whether your input is correct or not. The highlight() function uses this type for its language parameter. If there's a language you'd like to see added, you can open an issue or a merge request for it.

type BundledLanguage = "c" | "cpp" | ... | "plaintext" | "plain" | "text" | "txt"

bundledLanguages

An array of the names of all programming languages supported by Highlight. You can use this to programmatically check if, say, a user input language is supported by Highlight or not. If there's a language you'd like to see added, you can open an issue or a merge request for it.

const bundledLanguages: string[] = [
  "c",
  "cpp",
  ...,
  "plaintext",
  "plain",
  "text",
  "txt",
];

Theme

The type of theme object used by Highlight to color the code. You can use this type-check your theme object to ensure that it matches the type that Highlight expects.

type Theme = {
  fg?: string;
  bg?: string;
  highlights?: Record<
    string,
    {
      color?: string;
      fontWeight?: number;
      fontStyle?: "italic" | "normal" | "oblique";
      backgroundColor?: string;
    }
  >;
};

fg: The default text color, if no highlights are found to be valid, or if no highlight color is provided for that syntax.

bg: The background color of the code block. You can override the background color of specific types of syntax.

highlights: A record, with the keys being the syntax names, like function or string, and the values being an object with:

• color: An optional color value to override the fg color for a specific syntax type. This should be a color type that CSS understands, like hexadecimal (#2e73ffff), OKLCH (oklch(59.555% 0.21994 262.26 / 100%)), etc.
• fontWeight: An optional font weight for a specific syntax type. This should be a number between 1 and 1000.
• fontStyle: An optional font style for a specific syntax type. This can be italic, normal, or oblique.
• backgroundColor: An optional color value to override the bg color for a specific syntax type. This should be a color type that CSS understands, like a hexadecimal (#2e73ffff), OKLCH (oklch(59.555% 0.21994 262.26 / 100%)), etc.

The theme object is modelled off of Zed's theme object and so it shouldn't be too much work to convert from one to the other.