MathJax

訊息

參考文獻

簡體版

English

簡介

MathJax 是一個 JavaScript 函式庫，可以動態的將網頁中的數學式呈現出來，並且可以用右鍵剪貼數學式 (包含 LaTex 格式與 MathML 格式) 都有。

使用方法

最簡單的使用方法是直接引用 MathJax 的 JavaScript 網址，如下所示。

<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge" /> 

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

</head> 
<body> 

<h2>A Cross Product Formula</h2> 

<p>\[
  \mathbf{V}_1 \times \mathbf{V}_2 =
   \begin{vmatrix}
    \mathbf{i} & \mathbf{j} & \mathbf{k} \\
    \frac{\partial X}{\partial u} & \frac{\partial Y}{\partial u} & 0 \\
    \frac{\partial X}{\partial v} & \frac{\partial Y}{\partial v} & 0 \\
   \end{vmatrix}
\]</p> 

<h2>In-line Mathematics</h2> 

<p>Finally, while display equations look good for a page of samples, the
ability to mix math and text in a paragraph is also important.  This
expression \(\sqrt{3x-1}+(1+x)^2\) is an example of an inline equation.  As
you see, MathJax equations can be used this way as well, without unduly
disturbing the spacing between lines.</p> 

</body> 
</html>

以上程式碼中的設定相當於呼叫下列的設定函數：

<script type="text/x-mathjax-config"> 
  MathJax.Hub.Config({
    extensions: ["tex2jax.js"],
    jax: ["input/TeX","output/HTML-CSS"],
    tex2jax: {inlineMath: [["$","$"],["\\(","\\)"]]}
  });
</script>

使用技巧

網頁中的數學是想要被 MathJax 呈現，大致有兩種方法。

第一種方法是使用 class="math"，範例如下所示。

第二種方法是使用 inline 的方式，將所有某個「夾住的範圍」中的數學式呈現出來。

剪貼

MathJax 很好用的一個技巧是，可以按住右鍵然後設定格式，然後同樣按右鍵將數學式剪貼下來。

請參考下列網址：http://www.mathjax.org/demos/copy-and-paste/

動態呈現數學式

輸入數學式後呈現在某個欄位中，如下所示。

http://cdn.mathjax.org/mathjax/latest/test/sample-dynamic.html

甚至可以逐步顯示算式，這在教學或簡報上很有用，如下所示。

http://cdn.mathjax.org/mathjax/latest/test/sample-dynamic-steps.html

甚至可以邊打邊顯示，如下所示。

http://sage.math.washington.edu/home/jason/demo.html

該網頁的原始碼如下：

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN"> 
<html> <head> 
<title>MathJax Demo</title> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> 
<!-- <script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_HTMLorMML"></script> --> 
<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=TeX-AMS-MML_SVG"></script> 
<script type="text/javascript"> 
$(function() {
$('#math_input').keyup(function() {
    $('#preview').html($('<script type="math/tex">'+$('#math_input').val()+'</'+'script>'));
    MathJax.Hub.Queue(["Typeset",MathJax.Hub, "preview"]);
})
$('#math_input').keyup();
});
</script> 
</head> 

<body> 
<h1>MathJax Demo</h1> 

<textarea id="math_input" rows=10 cols=120>x^2</textarea> 
<hr/> 
<div id="preview"></div> 

</body> </html>

說明：邊打邊顯示的官方範例在 Google Chrome 上失敗，所以我們沒有用，官方範例網址如下：
- http://cdn.mathjax.org/mathjax/latest/test/sample-dynamic-2.html

Facebook

page revision: 6, last edited: 02 Aug 2012 01:53

Edit Rate (0) Tags Discuss (0) History Files Print Site tools + Options

金門大學：免費電子書、教材、程式、動畫

訊息

簡介

使用方法

使用技巧

剪貼

動態呈現數學式

Facebook

Facebook

Wikidot

Post preview:

Other interesting sites