WEB排版历练：如何在网文中插入图形形式的数学公式

由于我们是科技公司以及相应的专业特性，在网文中推送文章有时会包括许多数学符号和公式，但很多网络平台的网文编辑器并不能像Microsoft Office等图文编辑软件那样可以直接进行数学公式输入、排版和正确显示，这样造成网络上很多科技类文章的版面惨不忍睹。最近实在到了忍无可忍的地步，所以研究了在今日头条、微信公众号和新浪博客中，如何插入数学符号和公式，提高网文版面的美观度。

在一般大众网络平台上基本很少看到规范的带有数学公式的科技文章，可见插入公式非常困难且是个普遍现象，所以研究的一开始并不抱太大希望。但经过一天的研究，还是获得了初步的结果，至少还能马马虎虎使用。下面将详细介绍：如何在网文中插入数学公式的历练和虐心过程和结果。

1、研究路线

（1）网络调研：先了解其它人是如何解决这个问题的。世界之大，并不是仅自己一个人会遇到这种问题，世界上肯定还有其他人会遇到相同或相似的问题。

（2）试验验证：实际验证其他人的解决方法，或集成多个方法进行考核验证。

2、调研结果

通过调研发现，在文章中插入数学公式和符号，是大家普遍的痛点，也是大家深入研究和设法去解决的互联网软件技术之一。目前网络上有许多插入数学公式的方法，不同方法只能适用于不同的网络平台，这些方法大致可以分为以下几类：

（1）初级方法：首先设法将要输入的数学公式和符号转变为图片，然后在文章编辑器中以插入图片的方式插入数学公式和符号。由于绝大多数网络平台的图文编辑器都支持插入图片功能，所以图片方式插入数学公式是最普遍使用的方法，但也是效果最差的方法，如视觉效果不太好、输入操作工作量大、网页刷新速度慢等缺点。尽管有比较多的缺点，但在大多数国内主流网络平台上，也只能采用这种方法。至于为什么，就不得而知了，可能有更深层次的问题吧，比如网络安全问题等。

（2）中级方法：采用相应的计算机语言调用数学公式插件或脚本，如MathJax的开源JavaScript库，在线生成和插入图片化或矢量化的数学公式，免去将公式先保存为图片、然后再插入的麻烦。同样，如果公式太多，可能会造成刷新比一般网页慢的弊端。

（3）高级方法：很多排版软件都具有直接插入公式的功能，如Micro Office套件、Latex排版软件等，很多网站（例如简书、有道笔记和CSDN网站等IT行业人士聚集的网络平台）也开始支持Markdown的公式录入。并且可以使得从写作到完成、导出文本格式随心所欲，可以导出 HTML 格式的文件用来网站发布，也可以十分方便的导出PDF格式。

综上所述，尽管有很多种途径可以进行数学公式和图文编辑排版，但由于基于Markdown技术在插入公式时都含有JavaScript脚本语言，国内较大的一些网络平台都无一例外的对JavaScript脚本代码进行自动删除，如新浪博客等。

总之，调研的结论是：在新浪博客、微信公众号等一些大众化网络平台上，只能采用上述第一种初级方法，即将数学公式转换为图片，然后将公式图片插入文本中。而有些网络平台，如百度百家号和今日头条等，图片插入方式只允许行间插入，无法进行行内插入图片，这样基本上就断了在文章中插入数学公式和符号的奢望，但新浪博客、微信公众号和小木虫科技论坛等平台，则允许行内和行间插入图片。

3、在网文中插入图片形式数学公式的具体方法

步骤1：首先要将数学公式转换为图片

采用Latex在线公式编辑器，或其他常用或熟悉的公式编辑器软件，如MathType、TeXmacs和LibreOffice Writer等，进行公式和数学符号输入编辑。这些公式编辑器都具有图片输出功能，将输入完成的公式设定为图形格式进行存储。存储图片格式时要注意，一定要以网络平台文档编辑器所要求的图片格式进行存储，否则无法插入图片。

步骤2：在网络文档编辑器内插入公式图片

文档编写过程中，在需要编写公式的地方插入公式图片，插入形式可以是行内，也可以是行间，视公式排版格式具体要求而定，这样就基本完成了公式的插入，只是比较繁琐，有时会因为数学公式多而工作量比较大。

尽管比较麻烦，但貌似图片形式插入数学公式还是比较简单，但虐心还远没有结束，让我们看看微信公众号中插入多个图片公式后的显示效果。

从图中最终的显示效果可以看出，行间公式的显示没有问题，但行内公式很多都向上偏移，造成版面非常混乱。出现这种现象的主要原因是：文档编辑器对插入图片的默认格式是与此行文字的底边对齐，正确显示公式的图片格式应该是与文字行的中心对齐。

由于是文档编辑器的默认格式，为了中心对齐公式图片，就需要更改默认格式，就需要加入相应的网文HTML代码。

对于一些网络平台，高级点的文档编辑器都配置了“源代码显示”功能以显示HTML代码，这样便于用户自己编写一些代码来进行更复杂形式的排版。但微信公众号等所支持的文档编辑器并没有给用户开放这个功能，至少在目前情况下是这样，今后是不是能改进不得而知，目前也只能忍气吞声的将就了。

有些网络平台的文档编辑器配置了“源代码显示”功能，如新浪博客和小木虫科技论坛等，以下介绍的是如何增加简单的HTML代码设置图形公式为居中格式。

步骤3：编写行内图形公式居中格式代码

首先将文档编辑器的图文显示模式转换为源代码显示模式，然后在公式图片插入的代码处加上代码 align=”absmiddle”，所加代码的前后要有空格。

需要注意的是，图片竖直方向上的对齐方式一般用到“top：顶部对齐”、“bottom：底部对齐”和“middle：垂直居中对齐”三种格式。但对于图片公式而言必须使用一个很少用到的垂直居中对齐格式，就是绝对居中对齐格式absmiddle。对于“middle：垂直居中对齐”一般是指图片水平中心线与文本行的下边缘对齐，而absmiddle则是图片水平中心线与同一行中最大元素的水平中心线对齐。

对于绝对居中，有些网络平台需要采用的语句为vertical-align：middle，没有具体测试过，使用时要根据平台语言代码格式而定，总之要设定为“绝对居中”。

加入绝对居中代码后，将源代码显示模式恢复到文本显示模式，图片公式的上偏现象消失而彻底居中，如下图所示，还是小有效果滴，尽管不完美！

4、总结

对于在网络平台上进行网文编辑时的数学公式插入，为了网文的整体美观，大多数被迫采用将数学公式和符号转化为图形后再插入到图文中。
这种数学公式图形化后的插入形式，一般比较适合具有文字行内、行间图形插入功能和源代码显示功能的图文编辑器。为了所插入的数学公式真正具有比较美观的版面，还需要在图文编辑器的源代码中插入绝对居中代码命令。

如果有什么其他更好的方法，
请提出共享！