expressive-code-tree-sitter-highlighter

A highlighter for Expressive Code that supports
Tree-sitter syntax highlighting, instead of the
default which supports only TextMate.

Installation

Install the plugin with npm:

``bash
npm install expressive-code-tree-sitter-highlighter
`

Then import it in your astro.config.js:

`ts
export default defineConfig({
integrations: [
astroExpressiveCode({
plugins: [
pluginTreeSitterHighlighter(
[
{
// Part after the triple tick for a code block, e.g. ["mylang"]
ids: ["mylang"],
// Path to the generated tree-sitter-mylang.wasm, e.g. "./tree-sitter-mylang.wasm"
wasmUrl: "./tree-sitter-mylang.wasm",
// Path to the highlights.scm, e.g. "./highlights.scm"
highlightsScmUrl: "./highlights.scm",
}
]
)
]
})
]
})
`

Or in es.config.mjs for
Starlight:

`ts
import pluginTreeSitterHighlighter from 'expressive-code-tree-sitter-highlighter'

export default {
plugins: [
pluginTreeSitterHighlighter(
[
{
ids: ["mylang"],
wasmUrl: "./tree-sitter-mylang.wasm",
highlightsScmUrl: "./highlights.scm",
}
]
)
]
}
`

By default, the shiki highlighter is used. If you use this highlighter, the default highlighter
will error for languages that are not supported by shiki`. You can ignore them, or if you use only
Tree-sitter based languages, you can
disable the default highlighter.