prosemirror-highlightjs

prosemirror-highlightjs

Usage

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:

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.