Low-level highlighting w/ plugins

[kczx3]

I'm trying to use the highlight low-level function to render some HTML markup. I am able to get it to work but can't see how I can get additional plugins to function via this usage. Am I missing something?

import prism from "prismjs";
import "prismjs/plugins/line-numbers/prism-line-numbers";

export default function colorize(string) {
    return prism.highlight(string, prism.languages.html, "html");
}

//...
view(el, { html }, _children, _mChildren, { state }) {
        return [
            ...this.renderChildren(),
            state.rawRender ? el("pre.language-html.line-numbers",
                el("code.mpageui-u-pad-relative-base.language-html", {
                    oncreate: (vnode) => {
                        vnode.dom.innerHTML = colorize(html);
                    }
                })
            ) : el("div.ddnotecontent", {
                /** Sets the innerHTML of the containing element to props.html */
                oncreate: (vnode) => {
                    vnode.dom.innerHTML = html;
                },
                onclick: e => handleClick(this, e)
            })
        ];
    }
//...

[RunDevelopment]

The Line numbers plugin is implemented by reading and modifying the DOM nodes of code blocks (<pre><code>), so it requires Prism's higher-level API highlightElement function.

It's really hacky but you could use the fact that DOM nodes Line numbers creates are rather static. You could do something like this:

export default function colorize(string) {
  const pre = document.createElement("pre");
  pre.className = "language-html line-numbers";
  const code = document.createElement("code");
  code.textContent = string;
  prism.highlightElement(code);
  return pre.outerHTML;
}

Really hacky but it works.

[kczx3]

I cannot seem to get this to work... The call to highlightElement works but still no line numbers. I can even see that the plugin is loaded in the global Prism object.

[RunDevelopment]

You did include the CSS, right? You can check if the plugin was active by looking at the <code> element. Line numbers will add a div.line-numbers-rows at the very end of <code>. If that div is there, Line numbers worked.

[kczx3]

Jeez... that was it. I didn't think of that and never saw the div.line-numbers-rows because its at the bottom of the code block since it is absolutely positioned. Thank you!