在網頁中顯示數學公式

時間 2019-11-21

標籤網頁顯示數學公式欄目 HTML 简体版

原文原文鏈接

本網站是一個理科網站，每每會涉及數學公式的輸入和顯示，而這在Web上一直是一個難題。因此參考了好幾篇網上的文章，現將本身的學習成果整理一下。主要參考網址：章楊的blog的Web數學公式的輸入和顯示。javascript

一．計算機表現數學公式的幾種方法

1．面向桌面的TeX系統

TeX是Knuth教授開發的一種優秀的桌面電子排版系統。它提供了一套功能強大而且十分靈活的排版語言，有多達900多條指令，而且具備宏功能，用戶能夠不斷地定義本身適用的新命令來擴展TeX系統的功能。php

TeX系統有許多優勢，如開源、易移植、排版質量高、輸出結果與設備無關等。同時，它也是公認的最好的數學公式排版系統，它在數學和工程領域獲得了普遍的使用，相關領域的學術論文基本都由TeX系統或其兼容系統（如LaTeX系統）排版生成。css

在TeX系統中，各類數學符號和公式由不一樣的數學記號來表示，如\sin表示sin、\sqrt表示根號等。數學記號和數字的組合通常放在和\]裏面。下表中列出了幾個數學公式及其TeX指令：html

數學公式	TeX指令
	\frac{3+x}{5}\]
f（x）＝x2－1	f(x)=x^2-1\]
	\sqrt[3]{x^4-3x+1}\]

通常來講，TeX指令和它所表示的數學公式自己很是接近，或者是該數學符號的英文縮寫。所以TeX指令比較直觀、易學，也很方便輸入，中小學數學涉及的數學符號更是如此。java

但在中小學，公式的輸入幾乎不會用Tex，用的都是Word自帶的公式編輯器，我這些年一般使用域代碼，由於高中物理一般在輸入分數、根號時纔會涉及公式的輸入，而這種簡單的狀況用公式編輯器有點大材小用，也比較難輸，我一般只有在比較複雜的狀況下（好比或矩陣）才使用公式編輯器。瀏覽器

2．面向互聯網的數學標記語言MathML

TeX系統雖然能完美地顯示數學公式，可是沒法在互聯網上使用。目前我採用的方法是將Word中的公式進行截圖，在網頁中用圖像的方式顯示公式，用這種方法比較費時，並且修改也不方便。而HTML超文本標記語言因爲自身的缺陷，也很難顯示數學公式。服務器

針對這些問題，國際互聯網協會（World Wide Web Consortium，W3C）於1997年成立了W3C數學工做組，制定一種基於XML語言標準的數學標記語言（Mathematical Markup Language，MathML）。該組織於1998年發佈了MathML 1.0版本，當前最新版本是3.0，發佈於2010年10月21日。 MathML語言主要從表現（Presentation）和內容（Content）兩個維度來定義各類數學符號和公式。表現標記是從數學表達式的顯示形式來描述數學公式，如<msup>標記表示上標符號，<msub>表示下標符號等；而內容標記是從數學表達式自己的內在含義進行描述數學公式，如<plus>標記表示相加。兩者能夠從各自的角度表示同一個數學公式，以爲例，表現標記和內容標記分別以下：網絡

表現標記內容標記

注意：在Firefox上顯示不正常，緣由未知

MathML數學標記語言是一個國際標準，Mozilla/Firefox/Netscape（7.1+）瀏覽器已默認支持MathML語言，但Internet Explorer暫不支持MathML標準，須要安裝MathPlayer插件來解析含有MathML標記的網頁。app

3．ASCIIMathML轉換方法

簡單地說，TeX指令和MathML標記語言是兩種互補性很強的語言。採用TeX指令描述的數學公式簡單、直觀，但瀏覽器不能直接識別和顯示；MathML數學標記語言雖然是爲互聯網而設計的，但它的標記語言又相對複雜，不便於輸入。所以，有研究者結合二者的優勢，開發了TeX指令與MathML自動轉換的Java 程序，ASCIIMathML就是其中的佼佼者。編輯器

ASCIIMathML轉換程序由美國加州查普曼（Chapman）大學Peter Jipsen開發，其設計思想是在網頁上插入一段JS代碼，將網頁中的TeX指令（TeX/LaTeX-style）自動轉換成MathML表現標記語言，再返回給支持MathML標準的網絡瀏覽器識別和顯示。

因爲微軟Internet Explorer瀏覽器不支持MathML標準，若要正確地顯示數學公式，IE客戶端還須要安裝MathPlayer插件，這增長了用戶的不便。所以，皮爾斯學院David Lippman在ASCIIMathML轉換方法基礎上，開發了ASCIIMath Image Fallback轉換程序，該轉換程序自動判斷客戶端瀏覽器是否支持MathML，若支持，則返回MathML表現標記；若不支持，則返回該公式的GIF圖像（遠程調用互聯網上的cgi程序生成圖像）。另外，做者也提供了ASCIIMathTeXImg轉換，直接由TeX指令生成GIF圖像，而不管用戶使用的瀏覽器是否支持MathML。

在ASCIIMathML網站的最新消息是推薦一個新的轉換程序MathJax，它是一個開源的JavaScript顯示引擎，可以在全部當代瀏覽器上顯示漂亮的數學公式，同時支持Tex和MathML表示。

4．其餘方法

上面的方法須要用戶在本地保留js文件，而有些網站將處理程序放置在服務器上，你只需在頁面上傳遞公式的Tex表達，就會返回公式的圖像，其實就是上述ASCIIMathTeXImg的服務器版本。我知道的是網站http://www.codecogs.com的服務，例如你想在網頁上顯示a2＋b2 的平方根，你只需在網頁所在位置輸入如下html代碼：

1	`<` `img` `src` `=` `"http://latex.codecogs.com/gif.latex?\sqrt{a^2+b^2}"` `title` `=` `"\sqrt{a^2+b^2}"` `/>`

想使用起來更簡單，可用點js代碼，具體過程可參考在博客裏輕鬆使用LaTeX數學公式，再也不贅述。

2、在Web系統中顯示和輸入數學公式

從上面的內容能夠知道，ASCIIMathML不是個好選擇，在Firefox顯示正常的公式在IE中只能顯示源ASCII字符，使用http://www.codecogs.com無需在客戶機下載js文件應該最快，但有點受制於人，萬一這個網站服務不正常，那麼個人網站上的全部公式圖片都會顯示不出來。

考慮到國內IE用戶佔絕大多數，所以決定採用ASCIIMath Image Fallback轉換程序的方法，但採用的是更漂亮的MathJax。你只需在網頁和之間添加js的地址便可：

1	`<` `script` `type` `=` `"text/javascript"` `src` `=` `"http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"` `></` `script` `>`

由上面代碼可知咱們是經過CDN（distributed network service）安裝這個js的，這也是推薦的方法，CDN能夠自動從你的主機附近最快、最近的服務器上下載js文件，並且會自動升級。固然你也能夠將MathJax下載到本地服務器上。而後在網頁任意位置書寫TeX指令描述的數學公式，注意：若是要讓公式單獨佔一行，需用和\]將公式包起來，即以block顯示，若想用inline，則用\ (和\)將公式包起來，而公式的具體表達可參見中文維基：數學公式，寫得很是詳細。

可是手工書寫Tex公式仍是很是難的，我使用的是大名鼎鼎的MathType，在這個軟件的菜單欄選取Preferences→Cut and Copy Preferences...，以下圖進行設置，就能夠複製MathType的公式並粘貼爲可用於MathJax的LeTex格式。

若是不使用桌面程序，你也可使用在線的Tex公式編輯器，比方說http://www.codecogs.com/latex/eqneditor.php。

3、將MathJax公式粘貼到Word

若是直接在網頁上將MathJax顯示的公式粘貼到Word中，獲得的只會是一些字符。正確的操做方法是：首先在網頁的公式上右擊打開上下文菜單點擊MathML Code：

此時會彈出此公式的MathML代碼，而後複製這些代碼：

打開Word，粘貼爲文本便可：

注意：這個方法只能使用在docx中，由於自Word 2007引入的新格式docx中的公式編輯器也從新設計過了，我猜這個方法可行的緣由多是微軟的公式編輯器使用了Web標準的MathML語言。最後吐一下槽，微軟的這個新公式編輯器用起來太彆扭了，輸個簡單的公式也要弄半天，這幾年來我幾乎從沒用過它。

文件下載（已下載919次）

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title></title>
    <link rel="stylesheet" href="../css/index.css"/>
    <script type="text/x-mathjax-config">
      MathJax.Hub.Config({
        extensions: ["tex2jax.js"],
        jax: ["input/TeX", "output/HTML-CSS"],
        tex2jax: {
          inlineMath: [ ['$','$'], ["\\(","\\)"] ],
          displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
          processEscapes: true
        },
        "HTML-CSS": { availableFonts: ["TeX"] },
      });
</script>
    <script type="text/javascript" src="MathJax.js"></script>
</head>
<body>
    <div>設集合<span class="MathJye" mathtag="math" style="whiteSpace:nowrap;wordSpacing:normal;wordWrap:normal">M={x|0≤x≤<table cellpadding="-1" cellspacing="-1" style="margin-right:1px"><tr><td style="border-bottom:1px solid black">3</td></tr><tr><td>4</td></tr></table>}</span>，<span class="MathJye" mathtag="math" style="whiteSpace:nowrap;wordSpacing:normal;wordWrap:normal">N={x|<table cellpadding="-1" cellspacing="-1" style="margin-right:1px"><tr><td style="border-bottom:1px solid black">2</td></tr><tr><td>3</td></tr></table>≤x≤1}</span>，若是把b-a叫作集合{x|a≤x≤b}的「長度」，那麼集合M∩N的「長度」是（　　）</div>
    <div>$\frac{x^3}{e^x-1}$</div>
    <div>$\frac{1}{12}$</div>
    <div>$\frac{1}{4}$</div>
</body>
</html>