时间戳

首页 > 解决方案 > 如何在 html 中启用 Katex？

html - 如何在 html 中启用 Katex？

问题描述

我正在编写一个markdown文件并编译为html，我正在尝试在其上插入数学方程式Latex。我已经尝试过Mathjax但不支持某些方程式，所以我尝试了Katex。我插入了

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.css" integrity="sha384-JwmmMju6Z7M9jiY4RXeJLoNb3aown2QCC/cI7JPgmOLsn3n33pdwAj0Ml/CMMd1W" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/katex.js" integrity="sha384-atIluo+2Hixq8HCazSQWa1JjeC5L0CQeWAx74Q+EbqgAW4UixbrBQF4+1jvBX01b" crossorigin="anonymous"></script>

正如网站所说，但是当我打开html文件时，方程仍然显示在Latex代码中。在html上插入数学方程式的正确方法是什么？

标签： htmllatexmarkdownkatex

解决方案

您需要包含auto-render.js在您的 html 中

<!-- To automatically render math in text elements, include the auto-render extension: -->
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.10.0-rc.1/dist/contrib/auto-render.min.js" integrity="sha384-kWPLUVMOks5AQFrykwIup5lo0m3iMkkHrD0uJ4H5cjeGihAutqP0yW0J6dpFiVkI" crossorigin="anonymous"></script>

并在 html 加载后调用渲染函数

<script>
$(document).ready(function () { // this need jquery
  renderMathInElement(document.body, {
    // ...options...
    delimiters: [
      { left: "$$", right: "$$", display: true },
      { left: "$", right: "$", display: false },
      { left: "\\[", right: "\\]", display: true }
    ]
  });
});
</script>

推荐阅读