數學符號與程式碼區塊

• 1  數學符號 MathJax
  • • 1.0.1  希臘字母
  • 1.1  MathJax 範例
    • 1.1.1  矩陣與行列式
    • 1.1.2  次方與開根號
    • 1.1.3  總和
    • 1.1.4  三角函數
  • 1.2  MathJax 網路相關資源
• 2  程式碼區塊
  • 2.1  行內程式碼
  • 2.2  多行程式碼
  • 2.3  程式碼中的HTML
  • 2.4  高亮程式碼顯示
    • 2.4.1  Html
    • 2.4.2  CSS
    • 2.4.3  Javascript
• 3  可執行的程式碼區塊
  • 3.1  Python
  • 3.2  Markdown
  • 3.3  Html
  • 3.4  樣式 (CSS)
    • 3.4.1  Markdown區塊的CSS範例
    • 3.4.2  Code區塊的CSS範例
  • 3.5  Javascript
  • 3.6  jQuery
• 4  參考網址

數學符號 MathJax

MathJax是一個可以跨各主流瀏覽器的JavaScript函式庫，可以動態的將數學式呈現到網頁，效果幾乎跟傳統上的 LaTeX 一樣，MathJax支援LaTeX、MathML 及 AsciiMath 等語法。

• 在Junyter 的 Markdown 語法中，MathJax 的語法會以 \$ 包覆，數學式會隨文顯示，例如 $\sqrt{x}$會顯示 $\sqrt{x}$。
• 若爲單獨一列置中的數學式，則是以 \$\$ 包覆，例如 $$\sqrt{x}$$ 會顯示： $$\sqrt{x}$$
• 若爲單獨一列靠左的數學式，則是以 \$ 包覆並換行，並在上一段文字末尾加上兩個空格換行，例如：

  本段文字末尾有兩個空格  
  $\sqrt{x}$
  

  會顯示為：

  本段文字末尾有兩個空格
  $\sqrt{x}$

• 數學式若要換行則加上 \\，例如 $\sqrt{x} \\ \sqrt{x}$會顯示：

  $\sqrt{x}\\\sqrt{x}$

下表列出常用的數學符號及 MathJax 語法

符號	語法
$\infty$	\infty
$\pm$	\pm
$\times$	\times
$\div$	\div
$\le$	\le
$\ge$	\ge
$\ne$	\ne
$\because$	\because
$\therefore$	\therefore
$\parallel$	\parallel
$\perp$	\perp
$\angle$	\angle
$\triangle$	\triangle
$\cong$	\cong
$\sim$	\sim
$\cdot$	\cdot
$\vec{A}$	\vec{A}
$\nabla$	\nabla
$\partial$	\partial
$\ldots$	\ldots
$\left( \right)$	\left( \right)
靠左右	\left. \right.
$\to$	\to

常用的橫線及弧線符號

説明	範例	結果
上畫橫線	\overline{AB}	$\overline{AB}$
右箭頭	\overrightarrow{AB}	$\overrightarrow{AB}$
左右箭頭	\overleftrightarrow{AB}	$\overleftrightarrow{AB}$
上畫弧	\overset{\frown}{AB}	$\overset{\frown}{AB}$

常用的數學符號

説明	語法	範例	結果
空格	\,	a\,b	$a\,b$
上標	^	x^2	$x^2$
上標	^{}	e^{2\pi i}	$e^{2\pi i}$
下標	_	x_i	$x_i$
下標	_{}	x_{ix}	$x_{ix}$
向量	\vec{}	\vec{x}	$\vec{x}$
開根號	\sqrt{ }	\sqrt{a^2}	$$\sqrt{a^2}$$
開根號	\sqrt[n]{ }	\sqrt[3]{a^2}	$$\sqrt[3]{a^2}$$
分數	\frac{}{}	\frac{A}{B}	$$\frac{A}{B}$$
分數	\over	A \over B	$$A \over B$$
粗體	\mathbf{}	\mathbf{A}	$$\mathbf{A}$$
三角函數	\sin()	\sin(x)	$$\sin(x)$$
總和	\sum_{}^{}	\sum_{i}^{n}	$$\sum_{i}^{n}$$

常用的積分符號

説明	語法	範例	結果
$\int$	\int_{ }^{ }	\int_{a}^{b}	$\int_{a}^{b}$
$\iint$	\iint_{ }^{ }	\iint_{a}^{b}	$\iint_{a}^{b}$
$\iiint$	\iiint_{ }^{ }	\iiint_{a}^{b}	$\iiint_{a}^{b}$
$\oint$	\oint_{ }^{ }	\oint_{-\infty}^{\infty}	$\oint_{-\infty}^{\infty}$

希臘字母

字母	語法
$A B \,\Gamma \Delta$	A B \Gamma \Delta
$\alpha\beta\,\gamma\delta$	\alpha \beta \gamma \delta
$EZH\Theta$	E Z H \Theta
$\epsilon \zeta \eta \theta$	\epsilon \zeta \eta \theta
$ I K \Lambda M$	I K \Lambda M
$\iota \kappa \lambda \mu$	\iota \kappa \lambda \mu
$ N O \Xi \Pi$	N O \Omicron \Pi
$\nu \omicron \xi \pi$	\nu \omicron \xi \pi
$ P \Sigma T \Upsilon$	P \Sigma T \Upsilon
$\rho \sigma \tau \upsilon$	\rho \sigma \tau \upsilon
$\Phi X \Psi \Omega$	\Phi X \Psi \Omega
$\phi \chi \psi \omega$	\phi \chi \psi \omega

MathJax 範例

矩陣與行列式

c表示向中對齊，l表示向左對齊，r表示向右對齊

$\begin{array}{lcr}
a & b & c \\
d & e & f \\
g & h & i 
\end{array}$

$\begin{array}{lcr} a & b & c \\ d & e & f \\ g & h & i \end{array}$

$A =
\left(
\begin{array}{lcr}
  t_{11} & t_{12} & t_{13} \\
  t_{21} & t_{22} & t_{23} \\
  t_{31} & t_{32} & t_{33}
\end{array}
\right)$

$A = \left( \begin{array}{lcr} t_{11} & t_{12} & t_{13} \\ t_{21} & t_{22} & t_{23} \\ t_{31} & t_{32} & t_{33} \end{array} \right)$

$\left[
\begin{array}{ccc}
    a & b & c \\
    d & e & f \\
    g & h & i 
\end{array}
\right]$

$\left[ \begin{array}{ccc} a & b & c \\ d & e & f \\ g & h & i \end{array} \right]$

$\left|
\begin{array}{ccc}
    a & b & c \\
    d & e & f \\
    g & h & i 
\end{array}
\right|$

$\left| \begin{array}{ccc} a & b & c \\ d & e & f \\ g & h & i \end{array} \right|$

次方與開根號

$ x^2 \\ 
x^{2n}$

$ x^2 \\ x^{2n}$

$c = \sqrt{a^2 + b^2}$

$c = \sqrt{a^2 + b^2}$

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $$

$$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $$

總和

$\sum_{i}^{n+1} a_i=0$

$\sum_{i}^{n+1} a_i=0$

三角函數

$\cos(\theta+\phi)=\cos(\theta)\cos(\phi)−\sin(\theta)\sin(\phi)$

$\cos(\theta+\phi)=\cos(\theta)\cos(\phi)−\sin(\theta)\sin(\phi)$

MathJax 網路相關資源

• 數學式編輯器
• 數學式編輯器
• 數學公式

程式碼區塊

行內程式碼

如果要標記一小段行內程式碼，可以用反引號 ` 包起來即可，例如：

行內`<div></div>`行內

行內<div></div>行內

多行程式碼

多行程式碼區塊只要簡單地縮排4個空白或縮排一個 tab 就可以，程式碼區塊會一直持續到沒有縮排爲止，不過程式碼不會有高亮顯示，例如：

    function myFunction(a, b) {
      return a * b;
    }

function myFunction(a, b) {
  return a * b;
}

程式碼中的HTML

在程式碼區塊中，&和角括號(< >)都不會被解譯為HTML元件，若要執行HTML指令，則應使用可執行的程式碼區塊。

`這是<button><button>及 & 程式碼`

這是<button><button>及 & 程式碼

高亮程式碼顯示

在 Markdown 區塊，以三個反引號 ``` 包起來，加上程式碼名稱(例如:python, html, css, js)即可顯示高亮程式碼：

Html

```html
<h3>標題三</h3>
<p>我的段落</p>
```

<h3>標題三</h3>
<p>我的段落</p>

CSS

```css
h1 {
  text-align: center;
}      
```

h1 {
  text-align: center;
}

Javascript

```js
var x=10;
console.log(x);
```

var x=10;
console.log(x);

可執行的程式碼區塊

• 本單元僅適用 Jupyter Notebook 的 Code 區塊，其他編輯器若無Code區塊功能，便無法用來執行程式。
• 在Jupyter Notebook中，將區塊轉爲Code區塊便能夠執行程式。

Python

預設 Jupyter Python Notebook的 Code區塊 即可執行 Python。

print('這是Python程式')

這是Python程式

Markdown

在 Markdown區塊 預設即可執行 Markdown 指令，但若要在Code區塊中執行 Markdown 指令，則第一行要加上%%markdown：

Html

• Jupyter Notebook的 Markdown區塊 預設即可執行 HTML 指令。
• 在 Code 區塊 第一行需加上%%html，該區塊便可以撰寫html，並可按Ctrl-Enter執行。

%%html
<h3>標題</h3>
<p>我的段落</p>

標題

我的段落

樣式 (CSS)

• Jupyter Notebook的 Markdown區塊 預設即可執行 CSS 指令。
• 在 Code 區塊第一行要加上%%html便可以撰寫css樣式。
• 注意！ 執行後會影響到Notebook本身的樣式，以下的樣式範例也會套用到Notebook的表格。 ### Markdown區塊的CSS範例

  <style>   
    table {
      display: inline-block;
    }
  </style>
  

  ### Code區塊的CSS範例

  %%html
  <style>   
    table {
      display: inline-block;
    }
  </style>
  

Javascript

在 Code 區塊 第一行加上%%javascript便可以執行Javascript程式，但無法跨區塊使用變數及函數，除非宣告在window下才能跨區塊：

%%javascript
var x=10;

%%javascript

// x 變數無法跨區塊，會產生錯誤訊息
console.log(x);

jQuery

預設 Jupyter Notebook 已載入 jQuery.js 檔案，因此不需要再額外載入即可在 Code 區塊 執行 jQuery，例如：

%%html
<div id="myDiv"></div>

<script>  
$("#myDiv").text("jQuery已載入");  
</script>

參考網址

• Markdown語法
• 如何使用 Markdown 來撰寫 Docs
• 高亮程式碼展示
• HTML參考
• Extended Syntax
• Latax
  • 使用 MathJax 把 LaTeX 數學式轉為視覺化數學式
  • MathJax basic tutorial and quick reference