When dealing with static htmls, I usually include the following code in the <head> tag:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a9c2c8ddccd1e9998798998798">[email protected]</a>/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="f893998c9d80b8c8d6c9c8d6c9">[email protected]</a>/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
<script defer src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="345f5540514c74041a05041a05">[email protected]</a>/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
renderMathInElement(document.body, {
delimiters:[
{left: '\\begin{equation}', right: '\\end{equation}', display:true},
{left: '$$', right:'$$',display:true},
{left:'$', right:'$', display: false},
{left:'\\(', right:'\\)', display: false}
]
});
});
</script>
This code allows for math rendering throughout the document as long as $ is used correctly. I wanted to replicate this functionality in my VUE app.
I added the same code in index.html, and it worked initially. However, when I navigate away from a page containing math and then return, the math doesn't render properly, displaying only the code itself.
What have I tried?
I discovered that router-link does not render the head tag, preventing auto-rendering of math when switching routers. To address this, I included the following in the mounted hook:
renderMathInElement(document.body, {
delimiters:[
{left: '\\begin{equation}', right: '\\end{equation}', display:true},
{left: '$$', right:'$$',display:true},
{left:'$', right:'$', display: false},
{left:'\\(', right:'\\)', display: false}
]
});
While this approach successfully renders the math within the view, it triggers an error message in the terminal:
error: 'renderMathInElement' is not defined (no-undef) at src/views/Home.vue:57:2:
55 | },
56 | mounted(){
> 57 | renderMathInElement(document.body, {
| ^
58 | delimiters:[
59 | {left: '\\begin{equation}', right: '\\end{equation}', display
:true},
60 | {left: '$$', right:'$$',display:true},
1 error found.
How can I resolve this issue?