小分子网页显示第一版

使用mhchem宏包

latex可以用基于tikz的chemfig宏包来处理小分子结构显示问题，包括大型有机分子的结构显示问题，然后一些简单的小分子显示推荐 mhchem宏包。

mhchem看得出来是通过latex的数学环境来显示小分子结构的，所以马上就被html上的mathjax支持了，而chemfig是通过tikz机制，这可能以后永远都不会被mathjax支持（或者通过svg途径？）。首先是加载宏包：

\usepackage[version=3]{mhchem}

就作为一般使用来说，假定读者对latex的数学环境内的语法都很熟悉了，那么可以简单理解为mhchem宏包就是在数学环境下，加入了一个新命令 \ce{ } ，在这个ce命令里面上标和下标语法是类似数学环境内的语法表示的，不过对于具体化学表达式的显示会更加美观一些。

比如 $\ce{H_2O}$ 将显示为 $\ce{H_2O}$ ，然后 $\ce{AgCl_2^-}$ 将显示为 $\ce{AgCl_2^-}$ 。

此外还有一种简写写法：比如 $\ce{H2O}$ 将显示为 $\ce{H2O}$ ，然后 $\ce{AgCl2-}$ 将显示为 $\ce{AgCl2-}$ 。

我们可以看一下没有经过ce命令包装的纯数学环境表达的显示效果： $H_2O$ 和 $AgCl_2^-$ 。区别还是有点的。

数字

数字就直接写上即可 $\ce{0.5H2O}$ $\ce{0.5H2O}$ ，值得一提的是，前面的数字分数形式会自动处理： $\ce{1/2 H2O}$ $\ce{1/2 H2O}$ 。你会看到带上小数点的数字显示有点古怪。之前小数点会被解释成为配位化合物和结晶水中间的那个分隔点。如 $\ce{KCr(SO4)2.12H2O}$ $\ce{KCr(SO4)2.12H2O}$ 。为了正确显示前面的例子，把这个0.5放入数学环境中即可： $\ce{$0.5$H2O}$

$$ \ce{$0.5$H2O} $$

数学环境

同样，如上所示，mathjax目前是支持ce命令里面再加入数学环境 $ $ 的。

键

- = # 分别表示单键，双键和三键。 $\ce{A-A B=B C#C}$ 然后使用 \bond命令还可以加入其他一些额外的键，其中 $\ce{\bond{~}}$ 对应 $\ce{\bond{~}}$

，然后 $\ce{\bond{~-}}$ 对应 $\ce{\bond{~-}}$ ，其他类推。

化学反应式

$$
\ce{CO2 + C <- 2CO}
$$

$$ \ce{CO2 + C <- 2CO} $$

$$
\ce{CO2 + C ->[\text{加入text命令}] 2CO}
\ce{CO2 + C ->T[是支持][中文的] 2CO}
$$

$$ \ce{CO2 + C ->[\text{加入text命令}] 2CO} $$

$$ \ce{CO2 + C ->T[是支持][中文的] 2CO} $$

如果不使用text命令，那么中文在latex那一边不会正常显示。上面例子第二个没有使用text命令，是因为前面加上了T，然后箭头上下文字都不需要了。

上下箭头

$$
\ce{SO4^2- + Ba^2+ -> BaSO4 v ^}
$$

$$ \ce{SO4^2- + Ba^2+ -> BaSO4 v ^} $$

下降箭头是v，上式箭头是^，需要和前面的内容有一个空格。

mathjax简介

网页之所以能够显示数学公式就是利用的mathjax这个javascript库，然后这里之所以能够显示一些简单的化学是因为mathjax还引入了mhchem.js这个插件。

简单的引入代码如下所示：

<script type="text/javascript">
  window.MathJax = {
    tex2jax: {
      inlineMath: [ ['$','$'], ["\\(","\\)"] ],
      processEscapes: true
    },
        TeX: {
               extensions: ["AMSmath.js","AMSsymbols.js","noErrors.js","noUndefined.js","mhchem.js"]
             }
};
</script>

<script type="text/javascript" src="https://cdn.bootcss.com/mathjax/2.6.0/MathJax.js?config=TeX-MML-AM_CHTML"></script>

最关键的配置就是 TeX 的 extensions 哪里要引入 mhchem.js 。

参考资料

这个网站对于这一块内容讲解很详细。

翻墙软件推荐：