1. 参考博客:http://blog.csdn.net/smstong/article/details/44340637

1 数学公式的web解决方案

在网页上显示漂亮的数学公式,是多年来数学工作者和学者的愿望。最容易实现的方式就是使用离线编辑器如word,Latex等编写完公式,然后截图作为图片在html网页中显示。然而这种方式存在很多缺点:

  • 无法在线修改,离线修改后必须重新截图
  • 放大显示会失真,这是位图的天生缺陷
  • 不同的离线编辑器生成的显示效果不同,很难统一
  • 由于无法直接编辑,所以即使看到了公式,也无法在此基础上进一步修改,不利于交流

当然,位图显示公式也有一个最大的优点,那就是兼容所有浏览器,不需要任何插件就可以浏览。

随着html, css的持续发展,使用纯html+css来显示公式已经非常可行,于是大名鼎鼎的MathJax出现了。它是一个开源的JavaScript库,用来把特定格式的公式描述转换为html+css或者svg代码,从而在浏览器上显示数学公式。

2 MathJax渲染过程简单模拟

2.1 MathJax最简示例

先来看一个带公式的最简网页实例mathjax.html。

<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/x-mathjax-config">
MathJax.Hub.Config({tex2jax: {inlineMath: [['$','$'], ['\\(','\\)']]}});
</script>
<script type="text/javascript"
src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML">
</script>
</head>
<body>
When $a \ne $, there are two solutions to \(ax^ + bx + c = \) and they are
$$x = {-b \pm \sqrt{b^-4ac} \over 2a}.$$
</body>
</html>
 

在浏览器中打开mathjax.html,会显示如下图:

其对应的html代码如下图:

2.2 模拟MathJax渲染原理

从前面的例子可以看出,MathJax中数学公式是用一些特殊字符串表示的,这些字符串被特定的边界$ $$$ $$包围。然后MathJax引擎会根据边界提取公式表达式,然后把它们替换成用户显示公式的html+css代码。

下面我们来模拟这一过程。用math.js模拟MathJax.js,如下所示:

window.onload = function()
{
var body = document.getElementsByTagName('body')[];
var oldBody = body.innerHTML;
var newBody = oldBody.replace(/[^$]\$([^$]+)\$[^$]/g, function(str, r1){
return MathJax_inline(r1);
});
newBody = newBody.replace(/\$\$([^$]+)\$\$/g, function(str, r1){
return MathJax_block(r1);
});
body.innerHTML = newBody;
} // 把公式内容描述转换为显示描述
function MathJax_inline(r1)
{
return '<span style="color:red">' + r1 + '</span>';
} function MathJax_block(r1)
{
return '<div style="color:red">' + r1 + '</div>';
}


html页面相应修改:
<!DOCTYPE html>
<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/javascript" src="math.js"></script>
</head>
<body>
When $a \ne $, there are two solutions to $ax^ + bx + c = $ and they are
$$x = {-b \pm \sqrt{b^-4ac} \over 2a}.$$
</body>
</html>

来看看效果: 

虽然没有正确显示出公式,但是已经识别出了公式边界,并把公式部分用红色显示出来。真正的MathJax是把公式表达式替换成显示公式的html代码,而不是简单的设置为红色,但是这其中的处理原理是一致的。

3 MarkDown编辑器常用数学公式输入教程

MathJax支持多种公式输入输出规范,输入格式可以是MathML, TeX,ASCIImath中的任何一种,输出格式可以是html+css,或svg,或MathML。下面仅对最常用的Tex输入规范进行说明。

3.1 公式定界符与关键字

CSDN-MarkDown编辑器使用的公式定界符为$$$,单美元符号包围的是行内公式,双美元符号包围的是块公式。 
Tex关键字(字符转义序列)表示特殊显示符号,如\frac表示分数,其后面可以跟随参数,参数多少与关键字有关。

3.2 上下标

3.3 括号和分隔符

3.4 分数

3.5 开方

3.6 省略号

3.7 矢量

3.8 积分

3.9 极限

3.10 累加、累乘

3.11 希腊字母  ----是的就是这么写, 虽然我也是抄的别人的博客,但别人写对了,哈哈哈

希腊字符示例:$$\alpha A \beta B \gamma \Gamma \delta \Delta \epsilon E \varepsilon  \zeta Z \eta H \theta \Theta \vartheta \iota I \kappa K \lambda \Lambda \mu M \nu N \xi \Xi o O \pi \Pi \varpi  \rho P \varrho  \sigma \Sigma \varsigma  \tau T \upsilon \Upsilon \phi \Phi \varphi  \chi X \psi \Psi \omega \Omega$$

效果:

α A β B γ Γ δ Δ ϵ Eε  ζ Z η H θ Θ ϑι I κ K λ Λ μ M ν Nξ Ξ o O π Π ϖ  ρ Pϱ  σ Σ ς  τ T υ Υϕ Φ φ  χ X ψ Ψ ω Ω

下面的表格用于查询和对比。

序号 大写 LaTex代码 小写 LaTex代码 中文名称
1 A A α alpha 阿尔法
2 B B β beta 贝塔
3 Γ Γ γ gamma 伽马
4 D D δ delta 德尔塔
5 E E ϵ epsilon 伊普西隆
6 Z Z ζ zeta 泽塔
7 H H η eta 伊塔
8 Θ Θ θ theta 西塔
9 I I ι iota 约塔
10 K K κ kappa 卡帕
11 Λ Λ λ lambda 兰姆达
12 M M μ mu
13 N N ν nu
14 X X ξ xi 克西
15 O O ο omicron 欧米克隆
16 P P π pi
17 R R ρ rho
18 Σ Σ σ sigma 西格玛
19 T T τ tau
20 Υ Υ υ upsilon 宇普西隆
21 Φ Φ ϕ phi 弗爱
22 X X χ chi
23 Ψ Ψ ψ psi 普赛
24 Ω Ω ω omega 欧米伽
异体 E E ε varepsilon 异体
异体 K K ϰ varkappa 异体
异体 Θ Θ ϑ vartheta 异体
异体 P P ϖ varpi 异体
异体 R R ϱ varrho 异体
异体 Σ Σ ς varsigma 异体
异体 Φ Φ φ varphi 异体

3.12 数学符号大汇总

± :\pm 
× :\times 
÷:\div 
∣:\mid

⋅:\cdot 
∘:\circ 
∗: \ast 
⨀:\bigodot 
⨂:\bigotimes 
⨁:\bigoplus 
≤:\leq 
≥:\geq 
≠:\neq 
≈:\approx 
≡:\equiv 
∑:\sum 
∏:\prod 
∐:\coprod

集合运算符: 
∅:\emptyset 
∈:\in 
∉:\notin 
⊂:\subset 
⊃ :\supset 
⊆ :\subseteq 
⊇ :\supseteq 
⋂ :\bigcap 
⋃ :\bigcup 
⋁ :\bigvee 
⋀ :\bigwedge 
⨄ :\biguplus 
⨆:\bigsqcup

对数运算符: 
log :\log 
lg :\lg 
ln :\ln

三角运算符: 
⊥:\bot 
∠:\angle 
30∘:30^\circ 
sin :\sin 
cos :\cos 
tan :\tan 
cot :\cot 
sec :\sec 
csc :\csc

微积分运算符: 
y′x:\prime 
∫:\int 
∬ :\iint 
∭ :\iiint 
⨌:\iiiint 
∮ :\oint 
lim :\lim 
∞ :\infty 
∇:\nabla

逻辑运算符: 
∵:\because 
∴ :\therefore 
∀ :\forall 
∃ :\exists 
≠ :\not= 
≯:\not> 
⊄:\not\subset

戴帽符号: 
ŷ  :\hat{y} 
\check{y} :\check{y} 
y˘ :\breve{y}

连线符号: 
a+b+c+d⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯:\overline{a+b+c+d} 
a+b+c+d⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ :\underline{a+b+c+d} 
a+b+c⏟1.0+d2.0:\overbrace{a+\underbrace{b+c}_{1.0}+d}^{2.0}

箭头符号: 
↑:\uparrow 
↓:\downarrow 
⇑ :\Uparrow 
⇓:\Downarrow 
→:\rightarrow 
← :\leftarrow 
⇒ :\Rightarrow 
⇐ :\Leftarrow 
⟶ :\longrightarrow 
⟵ :\longleftarrow 
⟹:\Longrightarrow 
⟸ :\Longleftarrow

3.13 需要转义的字符

要输出字符 空格 # $ % & _ { } ,用命令: \空格 # \$ \% \& _ { }

3.14 使用指定字体

{\rm text}如: 
使用罗马字体:text ${\rm text}$ 
其他的字体还有: 
\rm  罗马体       \it  意大利体 
\bf  黑体        \cal  花体 
\sl  倾斜体       \sf  等线体 
\mit  数学斜体      \tt  打字机字体 
\sc  小体大写字母

MarkDown 编辑数学公式的更多相关文章

  1. 【干货】Markdown编辑博文,公式图片轻松搞定

    # Markdown 使用操作手册 作者:白宁超 Blog:伏草唯存 Markdown 是一种轻量级的「标记语言」,它的优点很多,目前也被越来越多的写作爱好者,撰稿者广泛使用.看到这里请不要被「标记」 ...

  2. 记录思想分享知识编辑器 Markdown 编辑阅读器

    web使用:实现网页客户端实时自动解析Markdown为HTML内容小小的展示:Cmd Markdown 编辑阅读器使用必要性:怎样引导新手使用 Markdown? - 写作

  3. 练习使用markdown编辑

    markdown纯文本编辑语言加粗,斜体Core Java 这是一篇学习了markdown编辑之后的练习 无序列表 1 2 > 怕什么真理无穷,进一寸有一寸的欢喜! 以下是代码的引用 class ...

  4. Flask学习记录之MarkDown编辑文本

    为了让网页支持markdown编辑文本,使用如下了4个库 PageDown : 在前端提供一个可以实时将markdown内容转换成html文本进行效果预览的编辑器 Flask-PageDown: 这个 ...

  5. 让Emeditor支持markdown编辑博客

    让Emeditor支持markdown编辑博客 1. 关于高亮显示 2.生成HTML文件并预览 用惯了Emeditor,最近又开始学习用markdown写博客,怎么让Emeditor支持markdow ...

  6. 使用Sublime Text 3进行Markdown编辑+实时预览

    使用Sublime Text 3进行Markdown编辑+实时预览 安装软件包管理器 打开Sublime Text 3 同时按下 ctrl+` ,窗口底部出现一个小控制台 复制以下代码,粘贴到控制台的 ...

  7. 使用Sublime Text 3进行Markdown 编辑+实时预览

    这种做法可能会对你的磁盘IO造成一小部分性能负担,但负面影响足以忽略. 另外,由于这种频率的读写会被磁盘缓存接管,不必担心磁盘寿命的影响. 对于刚安装好的Sublime Text,我们需要安装一个软件 ...

  8. 你不可缺少的技能——Markdown编辑

    Markdown简介 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式.请不要被「标记」.「语言」所迷惑,Markdown 的语法十分 ...

  9. Sublime Text 3配置支持Markdown编辑

    继上一篇http://www.cnblogs.com/EasonJim/p/7119304.html文章安装好之后,对Markdown支持需要做如下处理: 1.按下[Ctrl]+[Shift]+[P] ...

随机推荐

  1. 《并行程序设计导论》——Pthreads

    这部分不需要看了. 因为C++11和BOOST比这个Pthreads要好一点. 如果不考虑移植性,在Windows平台上用核心编程的东西比C++11和BOOST更好控制.

  2. 全栈开发之HTML快速入门(一)

    一.HTML 是什么? HTML 指的是超文本标记语言 (Hyper Text Markup Language) HTML 不是一种编程语言,而是一种标记语言 (markup language) 标记 ...

  3. MYsql优化where子句

    该部分讨论where子句的优化,不仅select之中,相同的优化同样试用与delete 和update语句中的where子句: 1: 移去不必要的括号: ((a AND b) AND c OR ((( ...

  4. 关于富文本在Android中的应用以及遇到的坑

    富文本可以为用户提供更加多样化的文本展示形式,但由于其使用了H5标签的特殊性,一般都需要第三方框架的支持.这里推荐一款合适的第三方富文本框架,richeditor. 首先我们要使用该功能需要引入相关j ...

  5. 读《你不知道的JavaScript(上卷)》后感-浅谈JavaScript作用域(一)

    原文 一. 序言 最近我在读一本书:<你不知道的JavaScript>,这书分为上中卷,内容非常丰富,认真细读,能学到非常多JavaScript的知识点,希望广大的前端同胞们,也入手看看这 ...

  6. 爬取知名社区技术文章_article_3

    爬虫主逻辑处理,获取字段,获取主url和子url #!/usr/bin/python3 # -*- coding: utf-8 -*- import scrapy from scrapy.http i ...

  7. python初识-day3

    1.字符串常用操作(较多,用代码加注释表示) name = '\tMy name is congcong' print(name.capitalize())#输出结果为 My name is cong ...

  8. 2.CLI标准

    CLI  简称(CLI标准) 通用语言架构    维基百科地址: http://zh.wikipedia.org/wiki/通用语言架构 是一个开放的  技术规范  .它是由  微软  联合  惠普  ...

  9. Linux实践篇--crontab定时任务

    原文出处:http://www.cnblogs.com/tracy/archive/2011/12/27/2303788.html.感谢作者的无私分享 一.  Crontab 介绍           ...

  10. alwaysOn中关于维护计划的应用方案

    由于alwaysOn环境下主副本所在的实际服务器不固定, 所以我目前采取的方案是创建维护计划的时候, 在各个服务器上创建一份维护计划. (假设有2个服务器需要故障转移, 那么就在这两个服务器上分别创建 ...