使用 JavaScript 顯示 Latex 數學式

JavaScript

簡介

歷史

開發工具

基本語法

運算式

分枝

迴圈

函數

陣列

物件導向

原型

封裝

繼承

多型

this

控制流程

進階功能

Eval 函數

Closure

JSONP

小書籤

字串

正規表達式

除錯方法

伺服端

播 midi

cookie

套件

ccc函式庫

2D 繪圖

3D 繪圖

影像處理

訊號處理

語音處理

數學計算

tex 數學式

格式轉換

桌面應用

自然語言

地理資訊

平台

Node.js

jQuery

Google

numeric.js

Titanium

引擎

語法

作品

翻譯精靈

繪圖精靈

DotWiki

流程

前端工程師

後端工程師

css

訊息

相關網站

參考文獻

最新修改

簡體版

English

由於瀏覽器無法顯示 LaTex 數學式,因此如果要在瀏覽器當中顯示 LaTex 數學式有幾個辦法,一個是將數學式送回 Server 然後轉換成圖形後再顯示出來,另一個是直接用 JavaScript 將 LaTex 轉換為 HTML 顯示出來。

MathJax 是一個可以將LaTex 轉換為 HTML 顯示出來的優秀 JavaScript 軟體,您可以從 http://www.mathjax.org/ 網站中下載該 MathJax 的 JavaScript 程式,這個軟體的功能很完整,文件也很齊全,讓筆者感覺到非常好用。

使用範例

舉例而言,以下是一個使用 MathJax 的 HTML 範例,該範例顯示了 $$x = {-b \pm \sqrt{b^2-4ac} \over 2a}.$$ 這樣的數學式。

範例一:使用 MathJax 顯示數學式的網頁範例

<html>
<head>
<title>MathJax TeX Test Page</title>
<script type="text/javascript" src="MathJax/MathJax.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 在 Firefox 當中的顯示既快速又漂亮,但是在 Google Chrome 瀏覽器中則有些微重疊的情況,最差的是在 IE 當中,顯示速度超慢 (大約一分鐘後才出現),而且顯示的結果較難看。因此如果您想要看 MathJax 所呈現的網頁,建議使用 Firefox 瀏覽器。

MathJaxInFirefox.png

範例一在 Firefox 3.6.8 中的顯示結果

MathJaxInGoogleChrome.png

範例一在 Google Chrome 6.0.472.63 中的顯示結果

MathJaxInIE.png

範例一在 IE 7 與 IE8 中的顯示結果

參考文獻

  1. http://www.mathjax.org/
  2. suluclac.com:Wiki MathJax Syntax — http://www.suluclac.com/Wiki+MathJax+Syntax

Facebook

Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-NonCommercial-ShareAlike 3.0 License