Hello World, Hello $\KaTeX$

Elegracer 于 2019-12-24 发布

我又发现 Jekyll 使用 KaTeX 只要在_config.yml里面设置好

kramdown:
    smart_quotes: apos,apos,quot,quot

然后在 html 的</body>之前加入下面这几行

<link
    rel="stylesheet"
    href="//cdnjs.loli.net/ajax/libs/KaTeX/0.12.0/katex.min.css"
    integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X"
    crossorigin="anonymous"
/>
<script
    defer
    src="//cdnjs.loli.net/ajax/libs/KaTeX/0.12.0/katex.min.js"
    integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4"
    crossorigin="anonymous"
></script>
<script
    defer
    src="//cdnjs.loli.net/ajax/libs/KaTeX/0.12.0/contrib/auto-render.min.js"
    integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa"
    crossorigin="anonymous"
></script>
<script>
    document.addEventListener("DOMContentLoaded", function () {
        function stripcdata(x) {
            if (x.startsWith("% <![CDATA[") && x.endsWith("%]]>"))
                return x.substring(11, x.length - 4);
            return x;
        }
        document
            .querySelectorAll("script[type='math/tex']")
            .forEach(function (el) {
                el.outerHTML = "\\(" + stripcdata(el.textContent) + "\\)";
            });
        document
            .querySelectorAll("script[type='math/tex; mode=display']")
            .forEach(function (el) {
                el.outerHTML = "\\[" + stripcdata(el.textContent) + "\\]";
            });
        renderMathInElement(document.body, {
            delimiters: [
                { left: "$$", right: "$$", display: true },
                { left: "$", right: "$", display: false },
                { left: "\\[", right: "\\]", display: true },
                { left: "\\(", right: "\\)", display: false },
            ],
            output: "html",
        });
    });
</script>

就可以正常使用了。

值得注意的是,默认设置下,display模式也就是块状的公式,用\\分割的多行之间距离太小, 实际上在 html 中有一个class="newline"的元素隔开的,只需要在 css 里设置这个元素的高度就好了。

.newline {
    height: 0.5em;
}

$\LaTeX$

\[\LaTeX\]