https://github.com/stackexchange/prosemirror-lezer
Experimental ProseMirror syntax highlighting plugin that uses Lezer grammars
https://github.com/stackexchange/prosemirror-lezer
Last synced: 6 months ago
JSON representation
Experimental ProseMirror syntax highlighting plugin that uses Lezer grammars
- Host: GitHub
- URL: https://github.com/stackexchange/prosemirror-lezer
- Owner: StackExchange
- License: mit
- Created: 2022-07-13T17:42:16.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-07-18T21:10:21.000Z (about 4 years ago)
- Last Synced: 2025-04-13T06:04:40.562Z (over 1 year ago)
- Language: TypeScript
- Size: 664 KB
- Stars: 4
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# prosemirror-lezer
> **Warning**
> This is an **experimental** plugin forked from [b-kelly/prosemirror-highlightjs](https://github.com/b-kelly/prosemirror-highlightjs). In its current state, this **should not be used in production**, as I'm not sure if I'll be maintaining this moving forward.
## Usage
```js
import { parser } from "@lezer/markdown";
import { highlightPlugin } from "prosemirror-lezer";
// parsers are keyed by language or optionally `*` as a fallback
const parsers = {
"markdown": parser,
};
let state = new EditorView(..., {
state: EditorState.create({
doc: ...,
plugins: [highlightPlugin(parsers)],
})
});
```
Or import just the decoration parser and write your own plugin:
```js
import { getHighlightDecorations } from "prosemirror-lezer";
let plugin = new Plugin({
state: {
init(config, instance) {
let content = getHighlightDecorations(
instance.doc,
parsers,
blockTypes,
languageExtractor
);
return DecorationSet.create(instance.doc, content);
},
apply(tr, set) {
if (!tr.docChanged) {
return set.map(tr.mapping, tr.doc);
}
let content = getHighlightDecorations(
tr.doc,
parsers,
blockTypes,
languageExtractor
);
return DecorationSet.create(tr.doc, content);
},
},
props: {
decorations(state) {
return this.getState(state);
},
},
});
```