prosemirror-highlightjs
TypeScript icon, indicating that this package has built-in type declarations

0.9.1 • Public • Published

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.

Package Sidebar

Install

npm i prosemirror-highlightjs

Weekly Downloads

9,167

Version

0.9.1

License

MIT

Unpacked Size

41.1 kB

Total Files

13

Last publish

Collaborators

  • abovedave
  • benkelly
  • dancormier
  • giamir
  • itstoragesvc
  • stacks-bot