static HTML for math node views

[piszczu4]

How to generate rendered math for static html? Currently math is nicely rendered in editing mode when it's not rendered when using DOMSerializer to get static HTML

[benrbray]

At the moment, this isn't implemented, I will keep it in mind for the next release. (a PR would be welcome!)

In the meantime, I recommend writing a ProseMirror plugin that calls KaTeX on the math node during (or after) DOM serialization.

[piszczu4]

Hi, I solved it in the following way. Do you have any suggestions? It's written in Tiptap framework btw

export const renderMathHTML = (displayMode: boolean) => (node: Node) => {
	let dom = document.createElement(
		displayMode ? "math-display" : "math-inline"
	);
	dom.className = "math-node";

	let tex = node.textContent;
	let src = document.createElement("span");
	src.className = "math-src";
	src.innerText = tex;

	let render = document.createElement("span");
	render.className = "math-render";

	katex.render(tex, render, {
		displayMode: displayMode,
		globalGroup: true,
	});

	dom.appendChild(src);
	dom.appendChild(render);

	return dom;
};

	parseHTML() {
		return [
			{
				tag: "math-inline",
				contentElement: "span.math-src",
			},
			...defaultInlineMathParseRules,
		];
	},