在Typecho中添加解析Latex公式的功能

今天看自己的网站排版，十分的难受，因为我使用的富文本编辑器会直接将Latex转换为图像，然后再插入到页面，我博客的主题对图像有其他改动，就导致图像压根就看不清，而且排版会非常混乱，如果公式在标题里的话

所以今天心血来潮，想在我的新主题Vergissmeinnicht里添加一个解析Latex公式的功能

我的新主题其实延续了Lycorisradiata主题的风格，但那个太卡了，也太笨重了，所以这个主题我十分注重轻量化和快速的问题，所以我毅然决然选择katex作为解析Latex公式的工具，因为它十分轻量化，对性能的影响比较小

我首先在header里引入和关于Katex的css

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@tabler/icons-webfont@latest/tabler-icons.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css">

接下来来到footer里，添加了相关的JS以及匹配规则，毕竟我使用了富文本编辑器，需要解析的内容可能被包裹在某个标签里

<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>

<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>

<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js" 
        onload="
        window.initKaTeX = function() {
            // 1. 核心渲染
            renderMathInElement(document.body, {
                delimiters: [
                    {left: '$$', right: '$$', display: true},
                    {left: '$', right: '$', display: false},
                    {left: '\\(', right: '\\)', display: false},
                    {left: '\\[', right: '\\]', display: true}
                ],
                // 忽略这些标签内部的内容
                ignoredTags: ['script', 'noscript', 'style', 'textarea', 'pre', 'code', 'option'],
                // 出错时不报错，直接显示源码，方便调试
                throwOnError: false,
                // 关键：允许容错
                errorColor: '#cc0000'
            });
        }; 
        // 2. 立即执行一次
        window.initKaTeX();
        ">
    </script>
<script>

其实正常添加到这里就结束了，但因为我的主题为了美观，引入了Pjax防止侧栏频繁刷新，所以我又在Pjax部分进行了一些特殊处理

        // 重载 KaTeX 公式
        if (typeof window.initKaTeX === 'function') {
            window.initKaTeX();
        }

这样就确保了在Pjax的情况下依然可以正常加载Latex公式

现在就舒服很多了！字体符合整个博客，颜色也符合！非常统一！