tree-sitter-ts-highlight-react

React components and hooks for tree-sitter-ts-highlight, with React-element rendering (no dangerouslySetInnerHTML required).

Install

npm install tree-sitter-ts-highlight-react tree-sitter-ts-highlight tree-sitter-ts

Peer dependencies

This package expects these to be installed in your app:

• react (^18 or ^19)
• tree-sitter-ts
• tree-sitter-ts-highlight

Theme CSS

Import a theme from tree-sitter-ts-highlight once in your app entry:

import "tree-sitter-ts-highlight/themes/github-dark.css";

Basic usage

import { Highlight, HighlightDiff } from "tree-sitter-ts-highlight-react";

export function Example() {
    return (
        <>
            <Highlight
                code={`const n: number = 42;`}
                language="typescript"
                options={{ lineNumbers: true }}
            />

            <HighlightDiff
                oldCode={`const n = 1;`}
                newCode={`const n = 2;`}
                language="typescript"
                options={{ view: "side-by-side" }}
            />
        </>
    );
}

API

Components

• Highlight
  • Props: code, language, options?, preProps?, codeProps?
  • Renders highlighted output as <pre><code> React nodes
• HighlightDiff
  • Props: oldCode, newCode, language, options?, containerProps?
  • Renders highlighted diffs (inline or side-by-side)

Hooks

• useHighlightedHtml({ code, language, options? })
  • Returns highlighted HTML without wrapping <pre>
• useHighlightedDiffHtml({ oldCode, newCode, language, options? })
  • Returns highlighted diff HTML

Re-exports

• Runtime exports from tree-sitter-ts-highlight are re-exported by this package.
• Type exports from both tree-sitter-ts-highlight and tree-sitter-ts are re-exported.

import type { HighlightOptions } from "tree-sitter-ts-highlight-react";
import type * as TsTypes from "tree-sitter-ts-highlight-react";

Development

npm run build
npm test