highlight-utils

React-free helpers for code highlighting pipelines. Use these from build tools, server-side renderers, Web Workers, or small syntax-highlighting services that need Mantle-compatible Code Block HTML without importing React components.

For ordinary React UI, prefer CodeBlock and mantleCode() from @ngrok/mantle/code-block.

1import {2	decorateHighlightedHtml,3	isSupportedLanguage,4	normalizeIndentation,5	parseLanguage,6} from "@ngrok/mantle/highlight-utils";

Usage

Decorate Shiki HTML

decorateHighlightedHtml takes trusted Shiki-highlighted HTML and wraps each line in the markup Mantle's CodeBlock.Code expects for line numbers and highlighted lines.

1import { decorateHighlightedHtml } from "@ngrok/mantle/highlight-utils";2 3const html = `<span class="line">const tunnel = await ngrok.forward();</span>`;4 5const decoratedHtml = decorateHighlightedHtml({6	html,7	showLineNumbers: true,8	lineNumberStart: 10,9	highlightLines: [10],10});

Only pass HTML produced by a trusted highlighter such as Shiki. The returned string is intended to be rendered as HTML by a Code Block pipeline.

Normalize indentation

normalizeIndentation trims leading and trailing blank space, removes the common indentation prefix, and rewrites leading whitespace to tabs or spaces.

1import { normalizeIndentation } from "@ngrok/mantle/highlight-utils";2 3const code = normalizeIndentation(4	`5		function main() {6			return "ready";7		}8	`,9	{ indentation: "tabs" },10);

Parse languages

Use parseLanguage and isSupportedLanguage when accepting language names from Markdown fences, user input, or service payloads.

1import { isSupportedLanguage, parseLanguage } from "@ngrok/mantle/highlight-utils";2 3parseLanguage("language-tsx"); // "tsx"4parseLanguage(undefined); // "text"5isSupportedLanguage("python"); // true

API

Types

1import type {2	DecorateHighlightedHtmlInput,3	Indentation,4	LineRange,5	SupportedLanguage,6} from "@ngrok/mantle/highlight-utils";