@git-diff-view/shiki

Advanced syntax highlighter for @git-diff-view using Shiki

Alternative syntax highlighter using Shiki for more accurate highlighting with TextMate grammars and VSCode themes.

Features

• ✅ VSCode-quality syntax highlighting
• ✅ TextMate grammar support
• ✅ VSCode-compatible themes
• ✅ More accurate language support
• ✅ Better color fidelity
• ✅ Async initialization

Installation

npm install @git-diff-view/shiki
# or
pnpm add @git-diff-view/shiki
# or
yarn add @git-diff-view/shiki

Usage

Basic Usage

import { DiffFile } from "@git-diff-view/core";
import { getDiffViewHighlighter } from "@git-diff-view/shiki";

const diffFile = new DiffFile(
  oldFileName,
  oldContent,
  newFileName,
  newContent,
  hunks,
  "typescript",
  "typescript"
);

// Initialize raw diff data first
diffFile.initRaw();

// Get Shiki highlighter (async)
const highlighter = await getDiffViewHighlighter();

// Apply syntax highlighting with Shiki
diffFile.initSyntax({ registerHighlighter: highlighter });

// Build views
diffFile.buildSplitDiffLines();
diffFile.buildUnifiedDiffLines();

// Get bundle
const bundle = diffFile.getBundle();

With Custom Shiki Configuration

import { getDiffViewHighlighter } from "@git-diff-view/shiki";

const highlighter = await getDiffViewHighlighter({
  themes: ['github-dark', 'github-light'],
  langs: ['typescript', 'javascript', 'python']
});

diffFile.initSyntax({ registerHighlighter: highlighter });

API Reference

getDiffViewHighlighter()

Get a configured Shiki highlighter instance.

async function getDiffViewHighlighter(
  options?: ShikiOptions
): Promise<Highlighter>

Options

Accepts standard Shiki configuration options.

Comparison

| Feature | @git-diff-view/lowlight | @git-diff-view/shiki | |---------|------------------------|---------------------| | Default | ✅ Built-in | ❌ Separate package | | Setup | No setup needed | Async initialization | | Accuracy | Good | Excellent (VSCode-level) | | Themes | highlight.js themes | VSCode themes | | Bundle Size | Smaller | Larger | | Performance | Synchronous | Async |

When to Use

Use @git-diff-view/shiki when you need:

• VSCode-quality syntax highlighting
• Accurate language grammar
• VSCode-compatible themes
• Better color fidelity

Use @git-diff-view/lowlight (default) when:

• You want zero configuration
• Bundle size is critical
• Synchronous initialization is preferred
• Basic highlighting is sufficient

Related Packages

• @git-diff-view/core - Core diff engine
• @git-diff-view/lowlight - Default highlighter
• Shiki - Underlying library

License

MIT © MrWangJustToDo