Support for Tree-sitter highlighting in Expressive Code
expressive-code-tree-sitter-highlighterbash
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