前言
本站此前使用MathJax和mhchem排版化学式，例如$\ce{H2O}$可以显示为$\ce{H2O}$。mhchem负责化学式的排版，SmilesDrawer则负责理解原子连接关系并生成二维结构图。
现在，在Markdown中写一段smiles代码块，页面就会把其中的分子SMILES渲染成SVG结构式，整个过程在浏览器端完成。
基本用法
在Markdown中使用smiles标记代码块，并在其中写入SMILES即可。例如，咖啡因的写法如下：
```smiles
CN1C=NC2=C1C(=O)N(C(=O)N2C)C
```
实际渲染效果为：
CN1C=NC2=C1C(=O)N(C(=O)N2C)C
结构图右上角有一个“复制源码”按钮，点击即可复制原始SMILES字符串，方便读者直接粘贴到ChemDraw、PubChem或其他工具中使用。
SMILES的结构表达
SMILES（Simplified Molecular Input Line Entry System）用一行字符串描述原子、化学键、环、支链和立体化学。下表列出阅读后续示例所需的记号：
| 写法 | 含义 |
|---|---|
C、N、O |
脂肪族原子（碳可省略氢） |
c、n |
芳香原子（小写） |
=、# |
双键、三键（单键和芳香键省略） |
( ) |
支链 |
数字（如C1...1） |
环闭合标记 |
@、@@ |
手性中心 |
/、\ |
双键的顺反构型 |
. |
分隔同一体系中的多个组分 |
这些记号可以组合成相当复杂的结构。下面用天然产物、合成药物和功能染料展示它们在多环骨架、芳杂环、长共轭链和立体化学中的用法。
多环骨架与连续手性中心：青蒿素
青蒿素含有稠环、桥环、过氧桥和多个手性中心，其结构远比一条直链复杂。PubChem收录的异构SMILES为：
C[C@@H]1CC[C@H]2[C@H](C(=O)O[C@H]3[C@@]24[C@H]1CC[C@](O3)(OO4)C)C
其中，重复出现的1、2、3、4把链状文本连接成多个环；@和@@记录各手性中心的构型；末尾的OO4则参与构成青蒿素特征的过氧桥。渲染器会根据这些信息自动安排原子和化学键的位置。
更复杂的天然产物：紫杉醇
紫杉醇含有高度官能团化的紫杉烷骨架、多个手性中心和一条芳香侧链，适合观察复杂稠环与取代基的写法：
CC1=C2[C@H](C(=O)[C@@]3([C@H](C[C@@H]4[C@]([C@H]3[C@@H]([C@@](C2(C)C)(C[C@@H]1OC(=O)[C@@H]([C@H](C5=CC=CC=C5)NC(=O)C6=CC=CC=C6)O)O)OC(=O)C7=CC=CC=C7)(CO4)OC(=O)C)O)C)OC(=O)C
这段SMILES把稠合环、桥环、酯基、羟基和立体化学记录在同一字符串中。图形布局由渲染器完成，源码仍然保留了进一步编辑和结构检索所需的信息。
多芳杂环药物：伊马替尼
伊马替尼的结构包含吡啶、嘧啶、苯环和甲基哌嗪，各片段通过酰胺键和亚甲基连接起来：
CC1=C(C=C(C=C1)NC(=O)C2=CC=C(C=C2)CN3CCN(CC3)C)NC4=NC=CC(=N4)C5=CN=CC=C5
其中，N3CCN(CC3)C描述甲基哌嗪环，NC(=O)对应酰胺连接，多个小写芳香环编号则把不同的芳杂环片段组织起来。与稠环天然产物相比，这类结构更明显地体现出SMILES按片段阅读的特点。
长共轭体系染料：吲哚菁绿
吲哚菁绿是近红外菁染料，具有两个含氮芳香端基、一条长聚甲炔链和增强水溶性的磺酸根取代基：
CC1(C(=[N+](C2=C1C3=CC=CC=C3C=C2)CCCCS(=O)(=O)[O-])/C=C/C=C/C=C/C=C\4/C(C5=C(N4CCCCS(=O)(=O)[O-])C=CC6=CC=CC=C65)(C)C)C.[Na+]
连续的/C=C/片段描述共轭链，[N+]和[O-]表示形式电荷，末尾的.[Na+]则是与之伴随的钠离子。这个例子同时展示了顺反构型、离子和多组分写法在功能染料中的组合。
更多语法可以参考Daylight的SMILES教程。
实现原理
这套方案和本站的mermaid代码块遵循同一套设计：作者在Markdown中编写纯文本源码，页面脚本再把它渲染成图形。
Kramdown会把代码块转换为带有language-smiles类名的HTML元素。页面脚本读取元素的textContent作为SMILES源码，因此SMILES中的括号、方括号、斜杠和#都能原样传给解析器。解析和布局完成后，脚本用SVG结构图替换原代码块，同时保留原始源码供复制按钮使用；需要排错时，原始代码块也可以作为回退内容显示。
绘图库通过ES Module从CDN动态导入：
const { default: SmilesDrawer } = await import(
"https://cdn.jsdelivr.net/npm/smiles-drawer@2/dist/smiles-drawer.min.mjs"
);
加载是按需进行的：构建页面时，Liquid模板检查正文是否包含language-smiles代码块，只有包含时才会输出相关样式和脚本。脚本本身约197 KB（gzip后约59 KB），访问其他文章时不会产生这部分请求。同一篇文章中的多个结构图共用一个SmiDrawer实例，库只加载一次。
SMILES结构图与Mermaid图共用同一套图表外框和复制按钮逻辑，两种图可以出现在同一篇文章中，各自的库独立按需加载。
核心绘图调用
SmilesDrawer的使用文档提供Canvas和SVG两种输出。本站使用SmiDrawer向SVG绘制分子或反应，核心调用可以概括为：
const drawer = new SmilesDrawer.SmiDrawer({
width: 600,
height: 400,
scale: 1,
bondLength: 24,
fontSizeLarge: 10,
fontSizeSmall: 4,
explicitHydrogens: false,
padding: 20
});
drawer.draw(source, svg, "light");
scale: 1让图形按照设定键长和文字大小呈现，避免简单分子被放大到整个画布；bondLength与字体选项控制结构的实际尺度。CSS中的max-width: 100%则负责在窄屏上按比例缩小较大的结构图。
explicitHydrogens: false采用更简洁的骨架式显示，减少氢标签与楔形键、环系之间的拥挤。楔形键和虚线键仍然保留；少数有助于表达环系立体化学的氢标签会由库继续显示。
SmiDrawer.draw接收原始SMILES，负责解析、自动布局和SVG绘制。本站的完整实现还通过成功与失败回调处理代码块替换，并添加figure外框、复制按钮和aria-label等无障碍属性，代码位于布局文件_layouts/post.html。
小结
` ```smiles `代码块让分子结构式以纯文本形式保存在文章源码中，可 diff、可复制、按需渲染。日常写作时，一行SMILES就能完成常见分子的结构展示；需要精确控制原子坐标和视觉排版时，也可以继续使用专业化学绘图软件生成的图片。
赞赏本文
| 支付宝 | 微信支付 |
|---|---|
 |
 |
