Render styled Lezer syntax trees to hast.
npm i hast-util-from-lezer
import { fromLezer } from "hast-util-from-lezer"
import { parser as javascriptParser } from "@lezer/javascript"
import { toHtml } from "hast-util-to-html"
const source = `function norm(a: number, b: number): number {
return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2))
}`
const tree = javascriptParser.parse(source)
const element = fromLezer(source, tree)
console.log(toHtml(element))yields the following HTML:
<span class="tok-keyword">function</span> <span class="tok-variableName">norm</span><span class="tok-punctuation">(</span><span class="tok-variableName tok-definition">a</span><span class="tok-punctuation">:</span> <span class="tok-typeName">number</span><span class="tok-punctuation">,</span> <span class="tok-variableName tok-definition">b</span><span class="tok-punctuation">:</span> <span class="tok-typeName">number</span><span class="tok-punctuation">)</span><span class="tok-punctuation">:</span> <span class="tok-typeName">number</span> <span class="tok-punctuation">{</span>
<span class="tok-keyword">return</span> <span class="tok-variableName">Math</span><span class="tok-operator">.</span><span class="tok-propertyName">sqrt</span><span class="tok-punctuation">(</span><span class="tok-variableName">Math</span><span class="tok-operator">.</span><span class="tok-propertyName">pow</span><span class="tok-punctuation">(</span><span class="tok-variableName">a</span><span class="tok-punctuation">,</span> <span class="tok-number">2</span><span class="tok-punctuation">)</span> <span class="tok-operator">+</span> <span class="tok-variableName">Math</span><span class="tok-operator">.</span><span class="tok-propertyName">pow</span><span class="tok-punctuation">(</span><span class="tok-variableName">b</span><span class="tok-punctuation">,</span> <span class="tok-number">2</span><span class="tok-punctuation">)</span><span class="tok-punctuation">)</span>
<span class="tok-punctuation">}</span>
import type { Tree } from "@lezer/common"
import type { Root } from "hast"
declare function fromLezer(source: string, tree: Tree): Roottree must already be styled if you want highlighting classnames in the resulting hast. This means the Lezer grammar you're using has to support highlight style props, typically included with a highlight.js file and a @external propSource directive in the grammar source. All the Lezer grammars maintained by the Lezer project do; you shouldn't have to worry about it.
hast-util-from-lezer is meant to be a minimal utility library - it's unlikely that I'll want to add new features to it, but if you find bugs, have interface or API suggestions, or general feedback, feel free to open an issue to discuss it!
MIT (c) 2024 Joel Gustafson