gitee pages + jekyll + katex 渲染公式异常

任务描述

在gitee和github上建立同样的基于Jekyll的博客，均采用同样的katex渲染

github一切正常：http://sirlis.cn/meta-learning-Reptile/

gitee中所有行间公式全部无法显示：https://sirlis.gitee.io/meta-learning-Reptile/
即使连最简单的行间公式：$$a=b-c$$ 都无法渲染。

公式渲染对比

所有行间公式均使用 $$......$$ 书写。所有行内公式均使用 $......$ 书写，对应的原始 markdown 内容如下：

## 1.2. 数学分析

**基于优化的元学习问题**（Optimization-based Meta-Learning）的目标：找寻一组**模型初始参数** $\boldsymbol \phi$，使得模型在面对随机选取的新任务 $\tau \sim \mathcal T$ 时，经过 $k$ 次梯度更新，在 $\tau$ 上的损失函数就能达到很小。

用数学语言描述，即

$$
\mathop{minimize}_{\phi} \; \mathbb E_{\tau}[L_{\tau}(^{k}_\tau\boldsymbol \phi)]
= \mathop{minimize}_{\phi} \; \mathbb E_{\tau}[L_{\tau}(U^k_\tau(\boldsymbol \phi))]
$$

其中

$$
\widetilde{\boldsymbol\phi} = {}^{k}_\tau \boldsymbol \phi=U^k_\tau(\boldsymbol \phi)
$$

是在任务 $\tau$ 上经过 $k$ 次更新后的模型参数。

Reptile 算法中**将** $(\boldsymbol \phi - \widetilde{\boldsymbol\phi}) / \alpha$ **看作梯度**，其中 $\alpha$ 为 SGD 中的学习率，即

$$
g_{Reptile} = (\boldsymbol \phi - \widetilde{\boldsymbol\phi}) / \alpha
$$

注意到，SGD 随机梯度下降的核心是，**梯度是期望，期望可使用小规模的样本近似估计。**

如果 $k=1$，那么有

$$
\begin{aligned}
g_{Reptile,k=1} &= \mathbb E_\tau [(\boldsymbol \phi - \widetilde{\boldsymbol\phi}) / \alpha]\\
&= \mathbb E_\tau [(\boldsymbol \phi - U_\tau(\boldsymbol \phi)) / \alpha]\\
&= \mathbb E_\tau [\boldsymbol \phi - U_\tau(\boldsymbol \phi)] / \alpha\\
&= \boldsymbol \phi / \alpha - \mathbb E_\tau [U_\tau(\boldsymbol \phi)] / \alpha \quad where \; \alpha,\phi=const \\
\end{aligned}
$$

又知道，$U_\tau(\boldsymbol\phi)$ 是计算 $k=1$ 次的梯度算子（省略 $k$）

$$
U_\tau(\boldsymbol\phi) = \boldsymbol \phi - \alpha \nabla_{\boldsymbol\phi} L_\tau(\boldsymbol\phi)
$$

则

$$
\begin{aligned}
\mathbb E_\tau [U_\tau(\boldsymbol \phi)] &= \mathbb E_\tau[\boldsymbol \phi - \alpha \nabla_{\boldsymbol\phi} L_\tau(\boldsymbol\phi)]\\
&= \boldsymbol\phi - \alpha \cdot \mathbb E_\tau [\nabla_{\boldsymbol\phi} L_\tau(\boldsymbol \phi)]
\end{aligned}
$$

带入上式计算 $g_{Reptile,k=1}$，有

$$
g_{Reptile,k=1} = \mathbb E_\tau[\nabla_{\boldsymbol\phi} L_\tau(\boldsymbol\phi)]
$$

因此有

$$
g_{Reptile,k=1} = \mathbb E_\tau [(\boldsymbol \phi - \widetilde{\boldsymbol\phi}) / \alpha] = \mathbb E_\tau[\nabla_{\boldsymbol\phi} L_\tau(\boldsymbol\phi)]
$$

另外，根据[此处](https://math.stackexchange.com/questions/1962991/expectation-of-gradient-in-stochastic-gradient-descent-algorithm)的讨论，以及后续两处讨论，当损失函数足够光滑和有界时，期望和梯度可以交换顺序

> The first step is probably the nastiest (although not in the discrete case I guess), but we can interchange the gradient and expectation assuming L is sufficiently smooth and bounded (which it probably is). See here(1) and here(2).

二者的渲染代码均为：

  <link rel="stylesheet" href="../katex/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
  <script defer src="../katex/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
  <script defer src="../katex/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
    onload="renderMathInElement(document.body, { delimiters: 
          [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ], throwOnError: false });">
  </script>

通过更换博客框架模板为hexo，问题仍然存在，排除jekyll的问题。
通过更换本地katex为cdn源，问题仍然存在。cdn源如下

  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.css" integrity="sha384-AfEj0r4/OFrOo5t7NnNe46zW/tFgW6x/bCJG8FqQCEo3+Aro6EYUG4+cU+KJWu/X" crossorigin="anonymous">
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/katex.min.js" integrity="sha384-g7c+Jr9ZivxKLnZTDUhnkOnsh30B4H0rpLUpJ4jAIKs4fnJI+sEnkvrMWph2EDg4" crossorigin="anonymous"></script>
  <script defer src="https://cdn.jsdelivr.net/npm/katex@0.12.0/dist/contrib/auto-render.min.js" integrity="sha384-mll67QQFJfxn0IYznZYonOWZ644AWYC+Pt2cHqMaRhXVrursRwvLnLaebdGIlYNa" crossorigin="anonymous"
  onload="renderMathInElement(document.body, { delimiters: 
          [
              {left: '$$', right: '$$', display: true},
              {left: '$', right: '$', display: false},
              {left: '\\(', right: '\\)', display: false},
              {left: '\\[', right: '\\]', display: true}
          ], throwOnError: false });">
  </script>

通过更换公式渲染方法为 mathjax，问题仍然存在，排除katex的问题。

  <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
  <script>
    MathJax = {
      tex: {
        inlineMath: [['$', '$']],
        displayMath: [['$$', '$$']]
      }
    };
  </script>
  <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>

解决方案

任务来源

update

通过更换另一个mathjax的cdn，部分行间公式能够显示，但仍然有一些行间公式无法渲染

目前猜测是 $$\begin{aligned}...\end{aligned}$$ 和 $$\begin{align*}...\end{align*} 的解析异常导致

更换的cdn为：

<script type="text/javascript" async  src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script>
<script type="text/x-mathjax-config">
  MathJax.Hub.Config({
    tex2jax: {
      skipTags: ['script', 'noscript', 'style', 'textarea', 'pre'],
      inlineMath: [['$','$']]
    }
  });
</script>

测试的公式包括：

如果 $k=1$，那么有

$$
\begin{align*}
y = y(x,t) &= A e^{i\theta} \\
&= A (\cos \theta + i \sin \theta) \\
&= A (\cos(kx - \omega t) + i \sin(kx - \omega t)) \\
&= A\cos(kx - \omega t) + i A\sin(kx - \omega t)  \\
&= A\cos \Big(\frac{2\pi}{\lambda}x - \frac{2\pi v}{\lambda} t \Big) + i A\sin \Big(\frac{2\pi}{\lambda}x - \frac{2\pi v}{\lambda} t \Big)  \\
&= A\cos \frac{2\pi}{\lambda} (x - v t) + i A\sin \frac{2\pi}{\lambda} (x - v t)
\end{align*}
$$

$$
\begin{align*}
g_{Reptile,k=1} &= \mathbb E_\tau [(\boldsymbol \phi - \widetilde{\boldsymbol\phi}) / \alpha] \\
&= \mathbb E_\tau [(\boldsymbol \phi - U_\tau(\boldsymbol \phi)) / \alpha] \\
&= \mathbb E_\tau [\boldsymbol \phi - U_\tau(\boldsymbol \phi)] / \alpha \\
&= \boldsymbol \phi / \alpha - \mathbb E_\tau [U_\tau(\boldsymbol \phi)] / \alpha \quad where \; \alpha,\phi=const \\
\end{align*}
$$

又知道，$U_\tau(\boldsymbol\phi)$ 是计算 $k=1$ 次的梯度算子（省略 $k$）

$$
U_\tau(\boldsymbol\phi) = \boldsymbol \phi - \alpha \nabla_{\boldsymbol\phi} L_\tau(\boldsymbol\phi)
$$

则

$$
\begin{aligned}
\mathbb E_\tau [U_\tau(\boldsymbol \phi)] &= \mathbb E_\tau[\boldsymbol \phi - \alpha \nabla_{\boldsymbol\phi} L_\tau(\boldsymbol\phi)]\\
&= \boldsymbol\phi - \alpha \cdot \mathbb E_\tau [\nabla_{\boldsymbol\phi} L_\tau(\boldsymbol \phi)]
\end{aligned}
$$

渲染结果为：

输入图片说明

但令人不解的是，采用同样cdn的mathjax，使用 \begin{aligned}... 书写的行间公式，在别处
http://williamzjc.gitee.io/example//math-test/
可以渲染。

两年过去了，这个问题仍然没有解决。。。

习惯了，所以我也不用gitee了。。

开源中国 / Gitee Feedback

内容风险标识

任务描述

解决方案

任务来源

评论 (3)

开源中国 / Gitee Feedback .gitee-modal { width: 500px !important; }

内容风险标识