@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

``bash
npm install @git-diff-view/shiki


or

pnpm add @git-diff-view/shiki

or

yarn add @git-diff-view/shiki
`

Usage

$3

`typescript
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();
`

$3

`typescript
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

$3

Get a configured Shiki highlighter instance.

`typescript
async function getDiffViewHighlighter(
options?: ShikiOptions
): Promise
``

#### 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