hast-util-from-codemirror

Render styled Lezer syntax trees to hast.

Table of contents

• Install
• Usage
• API
• Contributing
• License

Install

npm i hast-util-from-codemirror

Usage

import { fromCodeMirror } from "hast-util-from-codemirror"
import { typescriptLanguage } from "@codemirror/lang-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 = javascriptLanguage.parser.parse(source)
const element = fromCodeMirror(source, tree)
console.log(toHtml(element))

yields the following HTML:

<span class="cmt-keyword">function</span> <span class="cmt-variableName">norm</span><span class="cmt-punctuation">(</span><span class="cmt-variableName cmt-definition">a</span><span class="cmt-punctuation">:</span> <span class="cmt-typeName">number</span><span class="cmt-punctuation">,</span> <span class="cmt-variableName cmt-definition">b</span><span class="cmt-punctuation">:</span> <span class="cmt-typeName">number</span><span class="cmt-punctuation">)</span><span class="cmt-punctuation">:</span> <span class="cmt-typeName">number</span> <span class="cmt-punctuation">{</span>
        <span class="cmt-keyword">return</span> <span class="cmt-variableName">Math</span><span class="cmt-operator">.</span><span class="cmt-propertyName">sqrt</span><span class="cmt-punctuation">(</span><span class="cmt-variableName">Math</span><span class="cmt-operator">.</span><span class="cmt-propertyName">pow</span><span class="cmt-punctuation">(</span><span class="cmt-variableName">a</span><span class="cmt-punctuation">,</span> <span class="cmt-number">2</span><span class="cmt-punctuation">)</span> <span class="cmt-operator">+</span> <span class="cmt-variableName">Math</span><span class="cmt-operator">.</span><span class="cmt-propertyName">pow</span><span class="cmt-punctuation">(</span><span class="cmt-variableName">b</span><span class="cmt-punctuation">,</span> <span class="cmt-number">2</span><span class="cmt-punctuation">)</span><span class="cmt-punctuation">)</span>
<span class="cmt-punctuation">}</span>

Wrap this inside a pre tag and add styles/default.css for high-quality runtime pure-JS syntax highlighting!

API

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

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

tree must already be styled if you want highlighting classnames in the resulting hast. Generally, this just means that you need to import a CodeMirror language like @codemmirror/lang-javascript and not a basic Lezer parser like @lezer/javascript. If you give fromCodeMirror a tree taken directly from a basic Lezer parser, then you'll just get the source back as a single text node.

Due to technical limitations, hast-util-from-codemirror only uses classHighlightStyle internally - you can't provide it with a custom HighlightStyle and it can't use highlight styles that inline CSS.

Contributing

hast-util-from-codemirror 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