tree-sitter-ts-highlight-vue

Vue wrapper for tree-sitter-ts-highlight with native Vue-rendered VNodes (no v-html required).

Install

npm install tree-sitter-ts-highlight-vue tree-sitter-ts-highlight tree-sitter-ts

Import a theme from the base package in your app entry:

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

Quick start

import { defineComponent, h } from "vue";
import { Highlight, HighlightDiff } from "tree-sitter-ts-highlight-vue";

export default defineComponent({
  setup() {
    return () =>
      h("div", [
        h(Highlight, {
          code: "const n: number = 42;",
          language: "typescript",
          options: { lineNumbers: true }
        }),
        h(HighlightDiff, {
          oldCode: "const n = 1;",
          newCode: "const n = 2;",
          language: "typescript",
          options: { view: "side-by-side" }
        })
      ]);
  }
});

Composable usage

import { ref } from "vue";
import { useHighlightedHtml } from "tree-sitter-ts-highlight-vue";

const code = ref("const answer: number = 42;");
const language = ref("typescript");

const highlightedHtml = useHighlightedHtml({
  code,
  language,
  options: { lineNumbers: true }
});

Use useHighlightedDiffHtml similarly for old/new source comparison.

Exports

• Highlight: <pre><code> renderer for highlighted code.
• HighlightDiff: renderer for side-by-side or inline code diffs.
• useHighlightedHtml: composable returning highlighted HTML string.
• useHighlightedDiffHtml: composable returning highlighted diff HTML string.

All 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 also re-exported, so TypeScript libraries can consume upstream types directly from this package.

Notes for library users

• Requires Vue 3.4+ and peer dependencies tree-sitter-ts + tree-sitter-ts-highlight.
• This package renders VNodes directly, so component usage does not rely on v-html.
• For available themes and core highlighter options, see tree-sitter-ts-highlight docs.