化学方程式渲染测试

anzhiyu主题似乎没自带Katex的化学模块，所以研究了一下，写了篇教程方便其他需要的小伙伴

效果演示

此处Latex代码引用 哔哩哔哩专栏：化学方程式Markdown代码_转word方式

化学

查看效果演示

1.用电子式表示硫化钠的形成过程
Na×+⋅↷S. .. .⋅+×↶Na⟶Na+[.×S. .. ..×]2-Na+
\text{Na}\overset{\LARGE{\LARGE{\curvearrowright}}}{{\overset{×} {}+·}} \overset{\bf{.,.}}
{\underset {\bf{.,.}}{\text{S}}}\overset{\LARGE{\LARGE{\curvearrowleft}}}{{·+\overset{×} {}}
}\text{Na}\longrightarrow\text{Na}^+[\overset{×} {{\text{.}}}\overset{ \bf{.,.} }{\underset {\bf{.,.}}{\text{S}}}\overset{×} {{\text{.}}}]^\text{2-}\text{Na}^+

2.电解法冶炼铝
2 AlX2OX3X（熔融）=冰晶石电解4 Al+3 OX2↑\ce{2Al2O3_{\text{（熔融）}}} \xlongequal[冰晶石]{电解} \ce{4Al + 3O2 ^}

3.合成氨
NX2(g)+3 HX2(g)⇌2 NHX3(g)ΔH=−92.5kJ/mol
\ce{N2(g) + 3H2(g) <=> 2NH3(g)} \qquad \Delta H = -92.5kJ/mol

4.氢氧化钠电子式
Na+[:O. .. .:H]- \text{Na}^\text{+}[\text{:}\mathop{\text{O}}\limits_{\mathbf{.,.}}^{\mathbf{.,.}}\text{:}\text{H}]^\text{-}
5.NH4+电子式

[H ⁣:N¨HH¨ ⁣:H]+{ \Bigg[ \rm{H}\colon \underset{
\normalsize \ddot {H}}
{{ \stackrel { \normalsize H}
{\ddot{N}}}}
\colon H
\Bigg]}^+

6.四氯化碳电子式
:Cl⋅⋅⋅⋅:C⋅⋅:Cl⋅⋅:⋅⋅:Cl⋅⋅::Cl⋅⋅⋅⋅:\large\vcentcolon\rm \stackrel{\large\cdot\cdot}{\normalsize { \underset{\large\cdot\cdot}{Cl}}}\vcentcolon \stackrel{\large \vcentcolon \stackrel{\large\cdot\cdot}{\normalsize {Cl}}\vcentcolon}{\stackrel{\large\cdot\cdot}{\underset{\underset{\large\vcentcolon\large \underset{\large\cdot\cdot}{\normalsize {Cl}}\large\vcentcolon}{\large\cdot\cdot}}{\normalsize {C}}}}\vcentcolon \normalsize {\stackrel{\large\cdot\cdot}{ \underset{\large\cdot\cdot}{Cl}}}\vcentcolon
7.化合价标注
N−3H4N+5O3 \rm \stackrel{\tiny -3}NH_4\stackrel{\tiny +5}NO_3

目前Katex、Mathjax均不支持chemfig宏包，因为chemfig有一个依赖是tikz，这是一个相当庞大的图形库，所以化学结构式不做支持，需要使用只能自行上传svg文件或者图片文件。

生物

查看效果演示

1.ATP水解释放能量
ATP→酶ADP+Pi+能量 \rm ATP \xrightarrow{酶}ADP+Pi+能量
2.细胞有氧呼吸
总反应：C6H12O6+6H2O+6O2→酶6CO2+12H2O+能量 \text {总反应：}\mathrm{C}{6} \mathrm{H}{12} \mathrm{O}{6}+6 \rm{H}{2} O+6 \rm O_2 \xrightarrow{酶}6 \mathrm{CO}{2}+12 \mathrm{H}{2} O+能量

第一阶段(细胞质基质;糖酵解)：C6H12O6→细胞质基质、酶2C3H6O3+4[H]+能量 \text {第一阶段(细胞质基质;糖酵解)：}\rm{C}{6} \mathrm{H}{12} O_{6} \xrightarrow{细胞质基质、酶}2 \mathrm{C}{3} \mathrm{H}{6} \mathrm{O}_{3}+4[\mathrm{H}]+能量

第二阶段(线粒体基质;三羧酸循环)：2C3H6O3+6H2O→线粒体、酶6CO2+20[H]+能量 \text {第二阶段(线粒体基质;三羧酸循环)：}2 \mathrm{C}{3} \mathrm{H}{6} \mathrm{O}_{3}+6 \rm H_2O \xrightarrow{线粒体、酶}6 \rm CO_2 +20[H]+能量

第三阶段(线粒体内膜;电子传递链)：24[H]+6O2→线粒体、酶12H2O+能量 \text {第三阶段(线粒体内膜;电子传递链)：}24[\rm{H}]+6O_{2} \xrightarrow{线粒体、酶}12 \mathrm{H}_{2} \mathrm{O}+能量

3.氨基酸组成
H2N–C∣R∣H–COOH
\rm H_2N\text{\textendash}\underset{\normalsize H}{\underset{\shortmid}{\stackrel{\normalsize R}{\stackrel{\shortmid}{C}}}}\text{\textendash}COOH

教程

文章内

  • 在blog输入指令
1
npm install hexo-filter-katex
  • 在博客根目录_config.yml中添加
1
2
3
4
5
6
7
8
katex:
  enable: true
  copy_tex: false
  mhchem: true  # 启用化学扩展
  cdn:
    css: https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css
    js: https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js
    mhchem: https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/mhchem.min.js
  • 在themes\anzhiyu\layout\includes\head.pug中最底部添加
1
2
3
4
if theme.katex.enable
  link(rel="stylesheet" href=theme.katex.cdn.css)
  script(defer src=theme.katex.cdn.js)
  script(defer src=theme.katex.cdn.mhchem)

评论区

  • 在博客根目录_config.anzhiyu.yml或者themes\anzhiyu\_config.yml中找到# Inject配置项，引入外部css
1
2
3
4
inject:
  head:
    # 自定义css
    - <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" integrity="sha384-5TcZemv2l/9On385z///+d7MSYlvIEw9FuZTIdZ14vJLqWphw7e7ZPuOiCHJcFCP" crossorigin="anonymous">
  • 在source\js\文件夹下新建名为twikoo-katex.js的文件并粘贴以下内容，没有 js 这个文件夹的也可自己新建，如果想要其他位置自行更改即可
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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
// Twikoo评论系统Katex和mhchem支持
document.addEventListener('DOMContentLoaded', function() {
  // 配置mhchem扩展
  if (typeof katex !== 'undefined') {
    // 确保mhchem扩展已加载并注册
    try {
      if (typeof mhchem !== 'undefined') {
        console.log('mhchem扩展已加载');
      }
    } catch (e) {
      console.warn('mhchem扩展加载可能有问题:', e);
    }
  }
  
  // 渲染数学公式的函数
  function renderAllMath() {
    if (typeof renderMathInElement !== 'function') {
      console.log('renderMathInElement函数未加载');
      return;
    }
    
    // 配置Katex选项，包含mhchem支持
    const katexOptions = {
      delimiters: [
        {left: '$$', right: '$$', display: true},
        {left: '$', right: '$', display: false},
        {left: '\\(', right: '\\)', display: false},
        {left: '\\[', right: '\\]', display: true}
      ],
      throwOnError: false,
      strict: false,
      trust: true,
      // 添加宏定义以确保\ce命令被识别
      macros: {
        "\\ce": "\\ce{#1}",
        "\\pu": "\\pu{#1}"
      }
    };
    
    // 渲染整个页面的公式
    renderMathInElement(document.body, katexOptions);
    
    // 特别渲染评论区域
    const commentArea = document.getElementById('tcomment');
    if (commentArea) {
      renderMathInElement(commentArea, katexOptions);
    }
  }
  
  // 初始渲染
  setTimeout(renderAllMath, 100);
  
  // 监听评论区域变化
  const observer = new MutationObserver(function(mutations) {
    let shouldRender = false;
    mutations.forEach(function(mutation) {
      if (mutation.addedNodes.length) {
        mutation.addedNodes.forEach(function(node) {
          if (node.nodeType === 1) {
            if (node.classList && (
              node.classList.contains('tk-comment') ||
              node.querySelector('.tk-comment')
            )) {
              shouldRender = true;
            }
          }
        });
      }
    });
    if (shouldRender) {
      setTimeout(renderAllMath, 200);
    }
  });
  
  const commentContainer = document.getElementById('tcomment');
  if (commentContainer) {
    observer.observe(commentContainer, {
      childList: true,
      subtree: true
    });
  }
  
  // 监听页面变化
  window.addEventListener('popstate', function() {
    setTimeout(renderAllMath, 300);
  });
});
  • 在博客根目录_config.anzhiyu.yml中找到# Inject配置项，引入js
1
2
3
4
5
6
bottom:
  # 自定义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/mhchem.min.js"></script>
  - <script defer src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
  - <script src="/js/twikoo-katex.js"></script>

其他方案及补充说明

Hexo 插件使用——hexo-filter-mathjax

让 Hexo 搭建的博客支持 LaTeX

Twikoo 如何启用 katex 支持