Quick start

Install the package

Shell

npm install @opentf/syntax-highlighter

Shell

pnpm add @opentf/syntax-highlighter

Shell

yarn add @opentf/syntax-highlighter

Shell

bun add @opentf/syntax-highlighter

Shell

deno add npm:@opentf/syntax-highlighter

Highlight source to HTML

TypeScript

import { createHighlighter, renderHTML } from "@opentf/syntax-highlighter";

const source = `const answer = 42;`;
const highlighter = await createHighlighter({ language: "typescript" });
const tokens = highlighter.highlight(source);
const html = renderHTML(source, tokens);
// <span class="sh-keyword">const</span> ...

Wrap the result in your own <pre><code> and load a theme.

Try the other renderers

TypeScript

import { renderANSI, renderJSON } from "@opentf/syntax-highlighter";

console.log(renderANSI(source, tokens)); // truecolor terminal output
console.log(renderJSON(source, tokens)); // inspectable token stream

Go further

Getting started explains tokens, languages, and custom definitions.
Renderers covers each output in depth.