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:

npm install expressive-code-tree-sitter-highlighter

Then import it in your astro.config.js:

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:

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.