在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/contrib/auto-render.min.js";
  onload="
    window.initKaTeX = function() {
    // 1. 核心渲染
    renderMathInElement(document.body, {
      delimiters: [
        {left: '$$&#39;,&nbsp;right:&nbsp;&#39;$$', display: true},
        {left: '$&#39;,&nbsp;right:&nbsp;&#39;$', 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 部分进行了一些特殊处理：

// Pjax 回调函数中重载 KaTeX 公式
if (typeof window.initKaTeX === 'function') {
    window.initKaTeX();        
}

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

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