碼上歡樂
相關內容    簡體    繁體

MarkDown 編輯數學公式

本文轉載自   查看原文   2017-12-04 14:36   1780 

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 0$, there are two solutions to \(ax^2 + bx + c = 0\) and they are
            $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
        </body>
    </html>

 

 

在瀏覽器中打開mathjax.html，會顯示如下圖：

MathJax顯示效果

其對應的html代碼如下圖：

MathJax對應html

2.2 模擬MathJax渲染原理

從前面的例子可以看出，MathJax中數學公式是用一些特殊字符串表示的，這些字符串被特定的邊界$ $和$$ $$包圍。然后MathJax引擎會根據邊界提取公式表達式，然后把它們替換成用戶顯示公式的html+css代碼。

下面我們來模擬這一過程。用math.js模擬MathJax.js，如下所示：

window.onload = function()
{
    var body = document.getElementsByTagName('body')[0];
    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 0$, there are two solutions to $ax^2 + bx + c = 0$ and they are
        $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$
    </body>
</html>

 


來看看效果： 

模擬MathJax

雖然沒有正確顯示出公式，但是已經識別出了公式邊界，並把公式部分用紅色顯示出來。真正的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　　小體大寫字母


免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 Markdown編輯數學公式：Haroopad + MathJax Markdown數學公式 markdown 數學公式 編輯你的數學公式——markdown中latex的使用 markdown中數學公式 markdown數學公式大全 MarkDown(LaTex) 數學公式 Markdown數學公式語法 Markdown數學公式語法 Markdown數學公式語法
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM