Project: joeltg/hast-util-from-lezer

Package: hast-util-from-lezer@0.5.0

  1. Dependents: 0
  2. Render styled Lezer syntax trees to hast
  1. hast 75
  2. hast-util 48
  3. ast 37


standard-readme compliant license NPM version TypeScript types lines of code

Render styled Lezer syntax trees to hast.

Table of contents


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)

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): 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.


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) 2021 Joel Gustafson