I am trying to use quill and MathJax together in my Nuxt app.
I have a live preview section. But the problem is whenever I am trying to re-render the section the Quill Editor is also getting formatted. As a result, the equation is getting cleared before rendering in preview section.
Here is my reRender function:
function reRender() {
const previewEl= document.querySelector(".preview-area");
MathJax.typeset();
}
I tried passing the previewEl in the argument. Doing so, nothing is updating.
Here is my quill template-
<div id="editor" class="tex2jax_ignore mathjax-ignore" />
<div class="tex2jax_ignore mathjax-ignore">
$$ frac{1}{2} $$ - Content not parsed by Mathjax initially but parsed during update
</div>
<div v-html="editorHtml" class="preview-area"></div>
Here is script part:
if (typeof Quill !== "undefined") {
quill = new Quill("#editor", {
modules: {
syntax: true,
toolbar: "#toolbar-container",
},
placeholder: "Compose an epic...",
theme: "snow",
});
quill.on("text-change", () => {
editorHtml.value = quill.root.innerHTML;
reRender();
const blocks = document.querySelectorAll("pre code");
blocks.forEach((block) => {
hljs.highlightElement(block);
});
});
} else {
console.error("Quill is not defined");
}
I have also tried using ignoreClass
options, which works fine only when reloading the page. When using the typeset()
, it is rendering everything including the ignoreClass
.