网页中显示数学公式

2019独角兽企业重金招聘Python工程师标准>>>

    先链个演示地址 http://typeorigin.com/2013/07/14/20151225-how-to-display-formula/

    之所以去研究网页上方数学公式是因为像之前写的一篇标签云的文章，里面涉及到数学公式，直接用普通字符写出来不太美观。于是就上网搜了些资料，看看怎么能像word一样显示数学公式。当然也顺便为了拯救难看的方程组。

     一开始看到了开源中国上的关于MathML的文章，文章有点长没看完只看了开头。知道了MathML其实就是类似XML一样的显示数学公式的协议规范。

MathML 是一个 W3C 推荐标准，旨在为标记数学表达式定义一个 XML 词汇表。

        MathML 是一个用于标记数学表达式的 XML 词汇表，它包含两个子语言：Presentation MathML 和 Content MathML。Presentation MathML 主要负责描述数学表达式的布局（因此可与 TeX 或更早的 SGML 标记语言相比较，SGML 用于描述诸如 ISO 12083 之类格式的数学表达式的布局）。Content MathML 主要负责标记表达式的某些含义或数学结构。

        MathML比较复杂，看起来比较适合机器去处理，汗。

        后面通过http://www.cs.tut.fi/~jkorpela/math/ 看到了MathJax, jqMath . 先入为主的看了MathJax， 效果也还不错。不过如果对速度有要求的话jqMath可能更好。

        配置MathJax的话比较简单，只需要引入脚本文件即可

<script type="text/javascript" src="/static/js/mathjax/MathJax.js?config=AM_HTMLorMML-full"></script>

        然后只要用符合规范的语法写数学公式就可以了。

        MathJax支持的语法有TeX, LaTeX, MathML, 和 AsciiMath。AsciiMath呢看上去写法比较接近平常打数学公式的形式，于是我就采用了AsciiMath的配置 AM_HTMLorMML-full

        当然其他几种语法标记也有对应的配置，如果要改变的话只需要将脚本中config的值改为对应的配置即可。可选配置如下

• TeX-AMS-MML_HTMLorMML - 支持TeX, LaTex, MathML 的标记，可以 以MathML, 和 HTML-CSS 输出

• TeX-AMS_HTML - 支持TeX, LaTeX 标记， 以HTML-CSS 输出

• MML_HTMLorMML - 只支持MathML，可以以 MathML 和 HTML-CSS 输出

• AM_HTMLorMML - 只支持AsciiMath 标记， 可以以 MathML 和 HTML-CSS 输出

• TeX-AMS-MML_SVG - 支持TeX, LaTex, MathML， 但是是以SVG的方式输出

• TeX-MML-AM_HTMLorMML - 支持Tex, LaTex, MathML, AsciiMath, 可以以MathML 和 HTML-CSS的样式输出

    至于是否以MathML输出要看浏览器支不支持。

    采用AsciiMath的话, 只要将公式放在反引号(back quote)`之间就可以了，比如求根公式，比较粗糙的写出来是这样的：

    x = (-b +- sqrt(b^2-4ac))/(2a)

    然后MathJax渲染后是这样的：

     `x = (-b +- sqrt(b^2-4ac))/(2a)`

    看上去是很美观的。

    由于自己独立博客架在新浪云上，默认代码空间只有100M，但是看了下MathJax的文件居然要100多兆，而且上传也不给力，所以又搜了下，发现在引入MathJax.js的时候可以用到CDN上拉，相应的前面的脚本改为：

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=AM_HTMLorMML-full"></script>    

    这样的话就不用上传文件。    

    当然上面可以有说的不对的地方，为了急于实现功能，很多文章都是粗略看了个大概，肯定有很多疏漏的地方。后面我还会对一下细小的概念进行补充。

参考资料：

1、术语, http://docs.mathjax.org/en/latest/glossary.html#term-asciimath 

2、jqMath, http://mathscribe.com/author/jqmath.html 

转载于:https://my.oschina.net/GivingOnenessDestiny/blog/111431