# hast-util-from-codemirror
> Render styled Lezer syntax trees to hast
Latest version **0.3.1** (published 2022-01-08) · MIT license · 0 weekly downloads
## Install
```sh
npm install hast-util-from-codemirror
pnpm add hast-util-from-codemirror
yarn add hast-util-from-codemirror
bun add hast-util-from-codemirror
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.3.1 |
| Published | 2022-01-08 |
| First published | 2021-10-09 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 10.9 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 9 |
| Author | Joel Gustafson |
| Maintainers | joelg |
| Keywords | ast, abstract-syntax-tree, lezer, codemirror, hast, hast-util |
## Links
- npm: https://www.npmjs.com/package/hast-util-from-codemirror
- Repository: https://github.com/joeltg/hast-util-from-codemirror
- Homepage: https://github.com/joeltg/hast-util-from-codemirror#readme
- Issues: https://github.com/joeltg/hast-util-from-codemirror/issues
- npm.io page: https://npm.io/package/hast-util-from-codemirror
## Dependencies (3)
- [@types/hast](https://npm.io/package/@types/hast.md) ^2.3.1
- [@lezer/common](https://npm.io/package/@lezer/common.md) ^0.15.7
- [@codemirror/highlight](https://npm.io/package/@codemirror/highlight.md) ^0.19.6
## Alternatives
- [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads
- [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads
- [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads
- [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads
- [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads
## Recent versions
- 0.3.1 (latest) — 2022-01-08
- 0.3.0 — 2021-10-09
- 0.2.0 — 2021-10-09
- 0.1.1 — 2021-10-09
- 0.1.0 — 2021-10-09
- 0.0.1 — 2021-10-09
## README
# hast-util-from-codemirror
[](https://github.com/RichardLitt/standard-readme) [](https://opensource.org/licenses/MIT) [](https://www.npmjs.com/package/hast-util-from-codemirror)  
Render styled [Lezer syntax trees](https://github.com/lezer-parser/common) to [hast](https://github.com/syntax-tree/hast).
## Table of contents
- [Install](#install)
- [Usage](#usage)
- [API](#api)
- [Contributing](#contributing)
- [License](#license)
## Install
```
npm i hast-util-from-codemirror
```
## Usage
```typescript
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:
```
function norm(a: number, b: number): number {
return Math.sqrt(Math.pow(a, 2) + Math.pow(b, 2))
}
```
Wrap this inside a `pre` tag and add [styles/default.css](./styles/default.css) for high-quality runtime pure-JS syntax highlighting!
## API
```typescript
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`](https://codemirror.net/6/docs/ref/#highlight.classHighlightStyle) internally - you can't provide it with a custom [`HighlightStyle`](https://codemirror.net/6/docs/ref/#highlight.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
---
_Source: https://npm.io/package/hast-util-from-codemirror · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._