https://github.com/stackexchange/prosemirror-highlightjs
https://github.com/stackexchange/prosemirror-highlightjs
Last synced: about 1 year ago
JSON representation
- Host: GitHub
- URL: https://github.com/stackexchange/prosemirror-highlightjs
- Owner: StackExchange
- License: mit
- Created: 2020-06-13T02:27:27.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2025-03-28T18:47:26.000Z (over 1 year ago)
- Last Synced: 2025-07-11T20:25:10.292Z (about 1 year ago)
- Language: TypeScript
- Size: 1.19 MB
- Stars: 19
- Watchers: 3
- Forks: 1
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# prosemirror-highlightjs
## Usage
```js
import hljs from "highlight.js/lib/core";
import { highlightPlugin } from "prosemirror-highlightjs";
let state = new EditorView(..., {
state: EditorState.create({
doc: ...,
plugins: [highlightPlugin(hljs)],
})
});
```
Or import just the decoration parser and write your own plugin:
```js
import { getHighlightDecorations } from "prosemirror-highlightjs";
let plugin = new Plugin({
state: {
init(config, instance) {
let content = getHighlightDecorations(
instance.doc,
hljs,
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,
hljs,
blockTypes,
languageExtractor
);
return DecorationSet.create(tr.doc, content);
},
},
props: {
decorations(state) {
return this.getState(state);
},
},
});
```
## Theming considerations
Due to how ProseMirror renders decorations, some existing highlight.js themes might not work as expected.
ProseMirror collapses all nested/overlapping decoration structures, causing a structure such as
`.hljs-function > (.hljs-keyword + .hljs-title)` to instead render as `.hljs-function.hljs-keyword + .hljs-function.hljs.title`.