Я пытаюсь реализовать это расширение автоматического рендеринга Katex: https://katex.org/docs/autorender.html, оно ищет определенные c разделители, чтобы найти строки katex и отображает их в HTML.
Я выполнил инструкции и добавил CDN в заголовок моего index.html вот так:
<!-- 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>
В качестве теста я поместил следующее в свой тег <body> моего 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>
Работает отлично, я вижу катекс, отображаемый на экране.
Но теперь я хочу добавить эти типы строк формул катекса в другие Vue составные части. Я поместил ту же самую формулу div в свой шаблон компонента Home.vue:
<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>
Но катекс не отображается. Почему это происходит?
Я использую Vue v2.6.11 с Katex v0.12.0, с vue -cli, vue -router, babel, если они имеют какое-то отношение.