Hexo NexT -- 数学公式

发表于 更新于 分类于 置顶
阅读次数： 本文字数： 1.8k 阅读时长 ≈ 7 分钟

摘要

安装

  • 详细的安装方法请参考:Math Equations

  • 因为已经使用了hexo-renderer-markdown-it渲染器，所以这里就没有使用hexo-renderer-markdown-it-plus渲染器，其实两者也没有太大的区别，只不过后者默认就加载了一些插件，而前者需要自己安装插件并配置才可以使用。

  • 但是测试时发现，按照官网的配置hexo-renderer-markdown-it + markdown-it-katex 的方式并不能很好的进行公式的渲染，所以这里参考了 hexo-renderer-markdown-it-plus 渲染器，将其更换为@iktakahiro/markdown-it-katex。

1
npm install @iktakahiro/markdown-it-katex --save

在_config.yml配置上该插件

1
2
3
4
5
6
7
8
9
10
11
12
# config of hexo-renderer-markdown-it
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    # katex公式
    - "@iktakahiro/markdown-it-katex"

安装后遇到的问题

1.安装后发现通过hexo编译时会报类似如下警告

1
LaTeX-incompatible input and strict mode is set to 'warn': Unicode text character "即" used in math mode [unicodeTextInMathMode]

  • 原因是@iktakahiro/markdown-it-katex插件默认开启的是严格模式，不能在$$...$$或$...$中包含中文，虽然我设置的是math -- every_page: false，但其在编译阶段依旧会检查所有的页面，不过报这个警告并不会有什么影响，所以可以忽略。

  • 如果不希望看到这个警告，可以为 @iktakahiro/markdown-it-katex 添加模式的控制行为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
# config of hexo-renderer-markdown-it
markdown:
  render:
    html: true
    xhtmlOut: false
    breaks: true
    linkify: true
    typographer: true
    quotes: '“”‘’'
  plugins:
    # katex公式
    - name: "@iktakahiro/markdown-it-katex"
      options:
         strict: error # 默认为warn，这里设置为error，只有当解析器遇到不支持的公式时才报错，也可以设置为 false，表示不检查

不支持Katex的Auto-render Extension

  • 通过查看Katex官网可以知道，开启Auto-render Extension后，Katex可以渲染更多的公式语法，但要注意这并不是LaTex的标准语法

  • 但是@iktakahiro/markdown-it-katex中并没有相应的配置，为了解决这个问题，简单的方法就是将所需要的资源添加到页面中，比如我在source\_data\post-body-start.njk中添加了如下内容

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{%- if page.mathjax %}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.css" integrity="sha384-nB0miv6/jRmo5UMMR1wu3Gz6NLsoTkbqJghGIsx//Rlm+ZU03BU6SQNC66uf4l5+" crossorigin="anonymous">
<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/katex.min.js" integrity="sha384-7zkQWkzuo3B5mTepMUcHkMB5jZaolc2xDwL6VFqjFALcbeS9Ggm/Yr2r3Dy4lfFg" crossorigin="anonymous"></script>

<script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.11/dist/contrib/auto-render.min.js" integrity="sha384-43gviWU0YVjaDtb/GhzOouOXtZMP/7XUzwPTstBeZFe/+rCMvRwr4yROQP43s0Xk" crossorigin="anonymous"></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: "\\begin{equation}", right: "\\end{equation}", display: true},
            {left: "\\begin{align}", right: "\\end{align}", display: true},
            {left: "\\begin{alignat}", right: "\\end{alignat}", display: true},
            {left: "\\begin{gather}", right: "\\end{gather}", display: true},
            {left: "\\begin{CD}", right: "\\end{CD}", display: true},
            {left: "\\[", right: "\\]", display: true}
            ],
          // • rendering keys, e.g.:
          throwOnError : false
        });
    });
</script>
{%- endif %}

小贴士
可以通过next模板的_config.yml中的custom_file_path配置项来自定义渲染页面的某个部分，这样对应的每个页面都会加上该模板内容

1
2
custom_file_path:
  postBodyStart: source/_data/post-body-start.njk

  • 使用hexo-renderer-markdown-it-plus渲染器时，如果修改了页面的内容，此时刷新页面，会发现页面中的公式不能被渲染了，只能重新启动hexo服务。

  • 但是使用hexo-renderer-markdown-it渲染器时，刷新页面后公式就可以被渲染了。

使用

  • 每个页面的front-matter中要添加mathjax: true，这样在页面中就可以使用公式了。

  • Katex公式的渲染方式支持$...$和$$...$$两种方式

    • $...$为行级公式且居左展示
    1
    $sin(\omega t)=\frac{1}{2j}(e^{j\omega t}-e^{-j\omega t})$

    sin(ωt)=12j(ejωt−e−jωt)sin(\omega t)=\frac{1}{2j}(e^{j\omega t}-e^{-j\omega t})

    • $$...$$为块级公式且居中展示
    1
    2
    3
    $$
    sin(\omega t)=\frac{1}{2j}(e^{j\omega t}-e^{-j\omega t})
    $$

    sin(ωt)=12j(ejωt−e−jωt)sin(\omega t)=\frac{1}{2j}(e^{j\omega t}-e^{-j\omega t})

  • $$...$$和$...$中不能出现Unicode字符，否则会报错，即不支持中文，如果需要显示中文，则需要使用\text{中文}

  • 块级公式，在开头的$$之前和结尾的$$之后，不得有任何字符（空格除外）

  • 行级公式，在开头的$之后和结尾的$之前，不得有空格

示例

  • 使用方式可以参考 KaTeX公式符号 以及 维基百科：LaTeX公式手册

  • 不过记住这些公式符号还是比较困难的，这里推荐两个工具

    • MyScript: 手写转LaTeX公式，直接将你需要的数学公式画出来，它会自动将其转换为LaTeX公式，然后复制即可
    • LaTeX公式编辑器: 提供公式模板、图片识别(有次数限制)等功能，并且支持输出各种格式。
    • Simpletex: 支持LaTex公式图片识别和手写转公式，且无次数限制，但是需要注册账号。同时也提供了客户端版本。

  • 这里随便给几个示例，以下是LaTeX的标准语法

1
2
3
4
$$
\left(\beta m c^2 + c \left(\sum_{n=1}^3\alpha_n p_n\right)\right) \psi(x,t)
= i\hbar \frac{\partial \psi(x,t)}{\partial t}
$$

(βmc2+c(∑n=13αnpn))ψ(x,t)=iℏ∂ψ(x,t)∂t\left(\beta m c^2 + c \left(\sum_{n=1}^3\alpha_n p_n\right)\right) \psi(x,t) = i\hbar \frac{\partial \psi(x,t)}{\partial t} 

1
Aha! $E = mc^{2}$.

Aha! E=mc2E = mc^{2}.

1
2
3
$$
\left(\LARGE{AB}\right)
$$

(AB)\left(\LARGE{AB}\right) 

1
2
3
4
5
6
$$
\begin{matrix}
   a & b \\
   c & d
\end{matrix}
$$

abcd\begin{matrix} a & b \\ c & d \end{matrix} 

1
2
3
4
5
6
7
8
9
$$
\def\arraystretch{1.5}
   \begin{array}{c:c:c}
   a & b & c \\ \hline
   d & e & f \\
   \hdashline
   g & h & i
\end{array}
$$

abcdefghi\def\arraystretch{1.5} \begin{array}{c:c:c} a & b & c \\ \hline d & e & f \\ \hdashline g & h & i \end{array} 

1
$\tilde{a}$  &nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $\underrightarrow{AB}$

a~\tilde{a}          AB→\underrightarrow{AB}

1
2
3
4
5
6
7
8
9
10
11
$$
\tilde{a} \underrightarrow{AB}\begin{array}{l}
  a\mathop{x}\nolimits^{2}+bx+c=0 \\
  \Delta =\mathop{b}\nolimits^{2}-4ac \\
  \left\{\begin{matrix}
  \Delta \gt 0\text{方程有两个不相等的实根} \\
  \Delta = 0\text{方程有两个相等的实根} \\
  \Delta \lt 0\text{方程无实根}
\end{matrix}\right.
\end{array}
$$

a~AB→ax2+bx+c=0Δ=b2−4ac{Δ>0 方程有两个不相等的实根Δ=0 方程有两个相等的实根Δ<0 方程无实根\tilde{a} \underrightarrow{AB}\begin{array}{l} a\mathop{x}\nolimits^{2}+bx+c=0 \\ \Delta =\mathop{b}\nolimits^{2}-4ac \\ \left\{\begin{matrix} \Delta \gt 0\text{ 方程有两个不相等的实根} \\ \Delta = 0\text{ 方程有两个相等的实根} \\ \Delta \lt 0\text{ 方程无实根} \end{matrix}\right. \end{array}

  • 以下为开启Auto-render Extension后支持的公式语法，并不是LaTex的标准语法

1
2
3
4
5
6
7
$$
\begin{equation}
\begin{split}   a &=b+c\\
      &=e+f
\end{split}
\end{equation}
$$

\begin{equation} \begin{split} a &=b+c\\ &=e+f \end{split} \end{equation} 

1
2
3
4
5
6
$$
\begin{align}
   a&=b+c \\
   d+e&=f
\end{align}
$$

\begin{align} a&=b+c \\ d+e&=f \end{align} 

1
2
3
4
5
6
7
$$
\begin{CD}
   A @>a>> B \\
@VbVV @AAcA \\
   C @= D
\end{CD}
$$

\begin{CD} A @>a>> B \\ @VbVV @AAcA \\ C @= D \end{CD}