hast-util-from-lezer

Render styled Lezer syntax trees to hast.

Table of contents

• Install
• Usage
• API
• Contributing
• License

Install

npm i hast-util-from-lezer

Usage

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>

API

import type { Tree } from "@lezer/common"
import type { Root } from "hast"

declare function fromLezer(source: string, tree: Tree): Root

tree 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.

Contributing

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!

License

MIT (c) 2021 Joel Gustafson