Neo's Personal Matrix

    hast-util-from-codemirror
    TypeScript icon, indicating that this package has built-in type declarations

    0.3.1 • Public • Published

    hast-util-from-codemirror

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

    Render styled Lezer syntax trees to hast.

    Table of contents

    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!

    highlighted code snipped

    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

    Install

    npm i hast-util-from-codemirror

    DownloadsWeekly Downloads

    2

    Version

    0.3.1

    License

    MIT

    Unpacked Size

    11.1 kB

    Total Files

    9

    Last publish

    Collaborators

    • joelg