I'm trying to implement this Katex auto-rendering extension: https://katex.org/docs/autorender.html, it looks for specific delimiters to find katex strings and renders them in the HTML.
I've followed the instructions and added the CDN to the header of my index.html like so:
<!-- KATEX AUTO RENDERING -->
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css"
integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
crossorigin="anonymous"
/>
<script type="module">
import renderMathInElement from "https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.mjs";
renderMathInElement(document.body);
</script>
As a test, I put the following in my <body> tag of my index.html:
<body>
<div>
<div>
The formula $a^2+b^2=c^2$ will be rendered inline, but $$a^2+b^2=c^2$$
will be rendered as a block element.
</div>
<br />
<div>
The formula \(a^2+b^2=c^2\) will be rendered inline, but \[a^2+b^2=c^2\]
will be rendered as a block element.
</div>
</div>
<div id="app"></div>
</body>
It works perfectly, I can see the katex rendered on the screen.
But now I want to add these types of katex formula strings in my other Vue components. I put the exact same formula div in my Home.vue component's template:
<template>
<div>
<app-header></app-header>
<div>
<div>
The formula $a^2+b^2=c^2$ will be rendered inline, but $$a^2+b^2=c^2$$
will be rendered as a block element.
</div>
<br />
<div>
The formula \(a^2+b^2=c^2\) will be rendered inline, but \[a^2+b^2=c^2\]
will be rendered as a block element.
</div>
</div>
<textbook-selection></textbook-selection>
<app-footer></app-footer>
</div>
</template>
But the katex is not rendered. Why does this happen?
I'm using Vue v2.6.11 with Katex v0.12.0, with vue-cli, vue-router, babel, if those are of any relevance.
