數學符號與圖表

  • 數學符號:MathJax
  • 圖表:Mermaid
  • 如何安裝MathJax和Mermaid

MathJax

Earl Grey自動支援數學符號語言:MathJax,介紹可參考中文維基,對常人來說只有裝逼的時候用得到,舉個我自己也看不懂的範例:

∑i=0ni2=(n2+n)(2n+1)6

書寫方式:$$\sum_{i=0}^n i^2 = \frac{(n^2+n)(2n+1)}{6}$$,兩邊使用$$書寫數學公式,會產生置中的獨立區塊。兩邊使用$,公式則與文字並列:∑i=0ni2=(n2+n)(2n+1)6,MathJax會自動偵測版面調整字體──沒錯,它就和懂它的人一樣地聰明。

MathJax也能應付一些日常的需求,甚至提供裝飾字體:

示例介紹書寫方式1085次方$10^{85}$a+1b+1分數$\frac{a+1}{b+1}$x根號$\sqrt x$xy3立方根$\sqrt[3]{\frac{x}{y}}$α,β,Ω希臘字母,注意有大小寫區別$\alpha, \beta, \Omega$BLACKBOARD黑板粗體字,僅有大寫$\mathbb{內容}$,\mathbb可換作\Bbb。Boldface粗體字$\mathbf{}$Roman Font羅馬字體,輸入~產生空格$\mathrm{Roman~Font}$Typewriter等寬字體$\mathtt{}$ABCDEFG草寫體,僅有大寫$\mathscr{}$Fraktur德文尖角體$\mathfrak{}$

參考教學:MathJax basic tutorial and quick reference

Mermaid

Mermaid是可將文字轉換成向量圖形的圖表語法。

Gantt

2014-01-052014-01-122014-01-192014-01-262014-02-022014-02-092014-02-16A taskTask in secanother taskAnother taskSectionAnotherA Gantt Diagram

Sequence diagram

AliceJohnHello John, how are you?John, can you hear me?Hi Alice, I can hear you!I feel great!AliceJohn

Earl Grey支援Mermaid圖表,需透過文章各別啟用,用意在避免所有文章都援引不需要的程式碼。Mermaid能夠繪製:

  • 流程圖 | Flowchart
  • 順序圖 | Sequence diagram
  • 類別圖 | Class diagram
  • 狀態圖 | State diagram
  • 甘特圖 | Gantt
  • 圓餅圖 | Pie chart
  • ER模型圖 | Entity relationship diagram
  • 用戶旅程圖 | User journey

啟用方式:於文章Front Matter追加一條mermaid: true,下為YAML格式範例:

---
title: 文章標題
date: 文章日期
mermaid: true
---

流程圖示例

A

C

D

B

書寫範例:

點點點mermaid
graph TB
   A --> C
   A --> D
   B --> C
   B --> D
點點點

(請將點點點換成三個`)

圓餅圖示例