2

我正在尝试实现这个 Katex 自动渲染扩展：https : //katex.org/docs/autorender.html，它会查找特定的分隔符来查找 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>

它工作得很好，我可以看到屏幕上呈现的 katex。

但现在我想在我的其他 Vue 组件中添加这些类型的 katex 公式字符串。我将完全相同的公式 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>

但是 katex 没有被渲染。为什么会这样？

我正在使用 Vue v2.6.11 和 Katex v0.12.0，以及 vue-cli、vue-router、babel，如果它们有任何相关性的话。

4

0 回答 0