我们知道,要在网页中显示专业的图形, 数学公式可以使用MathJax库, 化学方程可以使用mhchem库,这两者都是Javascript代码写的程序库, 那么,如果想显示化学结构式, 是不是也有相应的Javascript库可用呢? 如果有这样的库,是不是就可以引入到Typora中让它支持化学结构显示呢?
出于这个目的, 我在网上搜索了一遍,发现这样的库还真有好些个. 如
1) JSME (这个很牛B, Sigma-Aldrich都在用它的库 https://peter-ertl.com/jsme/)
2) Kekule.js ( https://github.com/partridgejiang/Kekule.js) 相关论文 中国药科大学 开发的
3) JSmol (https://sourceforge.net/projects/jsmol/)、
4) ChemDoodle web Components (https://web.chemdoodle.com/installation/download/ 讲解细致)
5)Marvin JS (https://chemaxon.com/products/marvin-js/download)、
6) JSDraw ( https://www.scilligence.com/web/download-jsdraw/)
等等, 后面这几种是商业版的,需要收费,但功能上很强大,可以显示化学结构, 也可以编辑化学结构.
我这里介绍的不是以上任何一种,而是一个名为SMILESDrawer的开源的Javascript库, 免费, 顾名思义，它的功能就是基于SMILES来绘制分子结构, 使用非常简单. 它放在GitHub上 https://github.com/reymond-group/smilesDrawer.
介绍它的论文(论文链接)2018年才发表。为了便于感兴趣的朋友尝试，我把它的JS库下载下来, 和相关的介绍资料放到了一个压缩包内，你可以将压缩包释放到某个目录下，双击里面的“结构式测试.HTML“文档用浏览器查看。
链接：https://pan.baidu.com/s/1Efm7vTjs6_UuW5eL184lTg 提取码：ztow
在Chrome浏览器中,加载"结构式测试.htm"之后, 在文本框输入SMILES字串, 就可以马上得到了结构图. 这一特点使得它非常适合用来学习和测试SMILES.
先看一下简单的分子VEC：
再来一个复杂一点的, 以前解析过的LiBOB, 是一个螺环结构的锂盐:
再复杂一点, 三(草酸根合)磷酸锂 LiTOP的SMILES和结构式,三个草酸根螯合到中心磷原子上,形成一个比较奇特的阴离子.
当分子结构中某个原子充当多个环的公共节点时,需要分别标记它, LiBOB中硼原子标记为12, 这里磷原子标记为123. 这种多次标记虽然写成123,也可以写成123, 用斜线分隔一下似乎更好看一点.
仔细观察下面, 页底还提供了不同设置以微调显示效果,如文本尺寸、键长度、键粗细、短键的长度（如双键中的短键）、双键的横线之间的距离（Bond spacing)以及图形的尺寸（size），你可以用鼠标拉动黑点调节一下看看效果。
最后, 这个结构式可以另存为png图片,但没有更多的选项了。
有了这样的工具,即使手头没有专业的化学绘图软件,我们也可以绘制出比较专业的分子结构式来, 而且速度还不慢(当然,你得对SMILES够熟悉或者有这一串文本:心中有分子,屏幕才能帮你显示分子)
美中不足的是, SMILESDrawer生成的图形，没有办法人工干预图像中分子的位置, 有些细微的显示效果还不理想，比如上面VEC的图形不能旋转，LiTOP的锂离子显示在阴离子之后有重叠现象，但毕竟瑕不掩瑜。
最后,如果你想直接测试或使用这个工具, 不想安装到本地, 访问这个链接即可:
https://doc.gdb.tools/smilesDrawer/
