在静态htmls的情况下，我可以在<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.我该怎么办？
1条答案
按热度按时间zd287kbt1#
您可以在组件的脚本端使用
window.renderMathInElement(window.document)