用Katex渲染数学公式并使公式不换行

首先说下为什么用Katex,不用mathjax,因为mathjax文件太大,影响网页加载速度,功能有点冗余。

用Katex渲染数学公式

很简单,使用下面代码即可渲染出html代码中body标签中的数学公式

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.css" >
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/katex.min.js"></script>
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.13.13/dist/contrib/auto-render.min.js"></script>
<script>
    document.addEventListener("DOMContentLoaded", function() {
        renderMathInElement(document.body, {
          // customised options
          // • auto-render specific keys, e.g.:
          delimiters: [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ],
          // • rendering keys, e.g.:
          throwOnError : false
        });
    });
</script>

下面是公式

$\underline{\lim}_{n\to\infty}a_n=-\overline{\lim}_{n\to\infty}(-a_n)$

渲染结果如下

$\underline{\lim}_{n\to\infty}a_n=-\overline{\lim}_{n\to\infty}(-a_n)$

使Katex渲染数学公式后换行

Katex默认的渲染的公式是单独一行的,如果需要Katex渲染公式后不换行,那么要么是自己在html中设置样式,要么修改Katex的样式,只需要修改三行代码即可实现,还附带其他方法推荐,获取方法请阅读全文。

隐藏内容需要支付:¥10

未经允许不得转载!用Katex渲染数学公式并使公式不换行

如遇到无法显示的问题,请先尝试刷新页面

客服联系邮箱:ai52learn@foxmail.com

本文地址:https://ai.52learn.online/60034