Question

对于静态html，我可以在<head>标签中执行以下操作：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.css" integrity="sha384-dbVIfZGuN1Yq7/1Ocstc1lUEm+AT+/rCkibIcC/OmWo5f0EA48Vf8CytHzGrSwbQ" crossorigin="anonymous">
              <script defer  src="https://cdn.jsdelivr.net/npm/katex@0.10.1/dist/katex.min.js" integrity="sha384-2BKqo+exmr9su6dir+qCw08N2ZKRucY4PrGQPPWU1A7FtlCGjmEGFqXCv5nyM5Ij" crossorigin="anonymous"></script>
              <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.1/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>

，只要我正确使用$，它就会在文档中的任何位置呈现数学运算。我也想在VUE应用中做同样的事情。

我在index.html中添加了上面的代码，它在初始运行时就完成了工作。但是，当我更改router-view并返回到router所在的数学位置时，它只给我代码而不是呈现代码。

我尝试了什么？

我了解到一件事，就是router-link不会渲染head标签，因此在切换routers时不会执行自动渲染。因此，在mounted钩子中，我添加了

renderMathInElement(document.body, {
                          delimiters:[
                              {left: '\\begin{equation}', right: '\\end{equation}', display:true},
                              {left: '$$', right:'$$',display:true},
                              {left:'$', right:'$', display: false},
                              {left:'\\(', right:'\\)', display: false}
                          ]
                      });

它运行良好，并在该视图中呈现数学。但这给了我终端一个错误

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.

我该如何处理？

如何在vue js中为我的文档全局导入KaTeX？

我尝试了什么？

0 个答案: