渲染数学公式，大致两个要点，渲染和排版。
排版
目前大部分的排版方式都是基于TEX或者Latex（基于TEX）。之所以使用Latex，是因为它完全使用文本描述排版，对于复杂的数学公式、表格、化学分子式等完全不在话下，甚至可以排五线谱、棋谱、电路图等。
而数学公式只是Latex的一个子集。
渲染
从数学公式到眼睛所看到的界面，这一过程，最重要的就是GUI渲染。像word、WPS等Native应用，是用系统提供的API，直接将公式输出到屏幕。而非Native应用，是用宿主提供的能力，将公式翻译成宿主可识别语言，从而将公式输出到屏幕。第三种则是将公式转换成已存在的图形规范，诸如PNG，SVG等格式，从而将公式输出到屏幕。
第二种和第三种在某种程度上是统一的。本文只讲述第二、三种。
HTML
HTML作为标记语言，其宿主是浏览器。把公式翻译成HTML语言，由浏览器负责渲染到屏幕。
技术实现
Katex
Katex 可以将latex公式语法转换成html，其格式、字体比较优美，转换速度快。
用法：
var html = katex.renderToString("c = \\pm\\sqrt{a^2 + b^2}", {
throwOnError: false
});
// '<span class="katex">...</span>'MathJax
MathJax 是一个开源的 JavaScript 显示引擎，适用于 LaTeX、MathML 和 AsciiMath 表示法，适用于所有现代浏览器。
配置：
window.MathJax = {
loader: {load: ["input/tex", "output/chtml"]}
};MathML
MathML 是一个用于描述数学公式、符号的一种 XML (en-US) 标记语言，浏览器可以直接识别并渲染。但是这一特性并未在所有的浏览器中得到支持，仅仅firfox和safari支持，chrome的任何版本都不支持MathML。
直接编写MathML是相当困难的，通常我们会选择其他方式转换。
TeXZilla： 基于 Javascript 的 LaTeX to MathML 转换器。
LaTeXML：将 LaTeX 文档转换为 HTML+MathML 网页
MathJax 可以将输出格式设置为MathML。
Katex 可以将输出格式设置为MathML。
在渲染html公式时，框架一般提供了对应的css包，只有引入了这些包，你才能正常显示公式。
图片
可以将数学公式转换为图片，即可在任何设备上展示。具有优秀的跨平台特性，但是和文字的排版相对困难。
MathJax
MathJax 可以将公式转换为SVG格式的图片。
后端服务
可以使用一些特殊的后端服务解析latex公式，生成预览图片。
- codecogs是一个latex公式渲染服务，它根据get请求返回一个svg图片。
- jlatexmath：java版latex公式渲染服务
使用例子：TeXFormula formula = new TeXFormula(latex); TeXIcon icon = formula.createTeXIcon(TeXConstants.STYLE_DISPLAY, 20); BufferedImage image = new BufferedImage(icon.getIconWidth(), icon.getIconHeight(), BufferedImage.TYPE_BYTE_GRAY);
这里就不一一列举了，你甚至可以使用latex包，自己搭建一套服务。
在web端使用时，只需要在img标签的src上附加上带有公式文本的get请求链接，即可显示公式。
Canvas
我不认为用web canvas 渲染公式是一个好的方式，包括腾讯文档都没使用（尽管主体功能是用canvas实现的），但还是需要介绍一下这种方式。
canvas-latex 可以将latex公式转换到canvas画布上。
当然，html和图片也是可以被渲染到canvas画布上，但是我认为这让排版变得极其困难。
键入（公式编辑器）
能直接编写latex语法的人很少，为了方便使用，我们需要一个可以可视化输入的编辑器。
想想一下用户的使用过程，我们就可以知道，公式编辑器必然包含了公式的渲染，或采用图片，或采用html。
-
JMEditor 是基于CKEditor、jQuery、MathQuill等组件开发的，轻量级、开放源代码、所见即所得、无任何插件的在线公式编辑器。
-
kityformula-editor 是基于 SVG 的公式编辑器，百度前端富应用小组开发。
公式编辑器大多是一个弹出框，最后输出公式。所以这些编辑器可以被集成到各个富文本编辑器中去，只需要你理解对应富文本编辑器的插件机制即可。像kityformula-editor，就可以被集成到富文本tinyMCE中。
富文本编辑器中的公式
单独使用公式编辑器的场景比较少，大部分我们还是将它集成到富文本编辑器中。当我们存储富文本时，会存储其html文本。公式或存储成html、或图片。当我们在富文本编辑器中编辑的时候，如果公式被存储成图片，光标系统可很好的左右移动；但是如果被存储为html，没有经过精心设计的光标系统，会出先左右移动出现不可预料的情况。
tinyMCE是将公式显示成图；腾讯文档存储成了html，但是其光标系统经过精心设计，可以左右移动，跨过公式。
我曾经尝试过将kityformula-editor集成到wangEditor中，并输出html公式。光标在公式的html中迷失方向，无法跳出。如果你不在乎这个缺陷，也可以使用html公式。
