# 如何撰寫數學式及圖表 # MathJax 您可以使用 **MathJax** 語法 來產生 *LaTeX* 數學表達式，如同 [math.stackexchange.com](http://math.stackexchange.com/)，但是開始的 `$` 後面以及結尾的 `$` 前面不能有空白： The *Gamma function* satisfying $\Gamma(n) = (n-1)!\quad\forall n\in\mathbb N$ is via the Euler integral 使用區塊層級的數學式時，請在您的數學式之前與之後給予 `$$` 以及換行： - 範例一 ``` $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $$ ``` $$ x = {-b \pm \sqrt{b^2-4ac} \over 2a}. $$ - 範例二 ``` $$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. $$ ``` $$ \Gamma(z) = \int_0^\infty t^{z-1}e^{-t}dt\,. $$ >[!Note]更多關於 **LaTeX** 數學表達式 [開啟新分頁查看 ](http://meta.math.stackexchange.com/questions/5020/mathjax-basic-tutorial-and-quick-reference) # 心智圖 **Markmap** 用 Markdown 建立心智圖時，會根據標題階層建立節點。每個節點下可以用無序清單列出項目。 ### 範例與步驟 1. 使用程式碼區塊(code block)包覆以下的心智圖架構，你可以直接將滑鼠停留在程式碼區塊並一鍵  複製。 >[!Tip] 什麼是程式碼區塊？ >使用連續三個反向撇 \`\`\` 在第一行與最後一行包覆一段程式碼，編輯器會將這段視作「呈現一段裸程式碼」 > >我們可以在第一行的 \`\`\` 後面加上想要渲染的圖表類型 ``` # markmap - An end point without parent node name ## Links - - [GitHub](https://github.com/gera2ld/markmap) ## Related - [coc-markmap](https://github.com/gera2ld/coc-markmap) - [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap) ## Features - links - **inline** ~~text~~ *styles* - multiline text - `inline code` - ```js console.log('code block'); ``` ``` 2. 在首行的 \`\`\` 後面加上 「markmap」 3. 最終渲染出來會呈現 :point_down: ```markmap # markmap - An end point without parent node name ## Links - - [GitHub](https://github.com/gera2ld/markmap) ## Related - [coc-markmap](https://github.com/gera2ld/coc-markmap) - [gatsby-remark-markmap](https://github.com/gera2ld/gatsby-remark-markmap) ## Features - links - **inline** ~~text~~ *styles* - multiline text - `inline code` - ```js console.log('code block'); ``` ``` # UML 圖表 ### 循序圖 1. 使用程式碼區塊(code block)包覆以下的心智圖架構 ``` 艾莉絲->包柏: 哈摟，你好嗎？ Note right of 包柏: 包柏思考中 包柏-->艾莉絲: 我很好，謝謝！ Note left of 艾莉絲: 艾莉絲回應 艾莉絲->包柏: 最近過得怎樣？ ``` 2. 在首行的 \`\`\` 後面加上 「sequence」 3. 最終渲染出來會呈現 :point_down: ```sequence 艾莉絲->包柏: 哈摟，你好嗎？ Note right of 包柏: 包柏思考中 包柏-->艾莉絲: 我很好，謝謝！ Note left of 艾莉絲: 艾莉絲回應 艾莉絲->包柏: 最近過得怎樣？ ``` **[:arrow_right: 看此筆記的原始碼 :arrow_left:](https://hackmd.io/r1p_loXISn69k3t5cYMbtg#UML-%E5%9C%96%E8%A1%A8)** [更多關於 **循序圖** 語法 ](http://bramp.github.io/js-sequence-diagrams/) # 流程圖 您可以像是以下使用流程圖： ```flow st=>start: 開始 e=>end: 結束 op=>operation: 我的操作 op2=>operation: 啦啦啦 cond=>condition: 是或否？ st->op->op2->cond cond(yes)->e cond(no)->op2 ``` **[:arrow_right: 看此筆記的原始碼 :arrow_left:](https://hackmd.io/r1p_loXISn69k3t5cYMbtg#%E6%B5%81%E7%A8%8B%E5%9C%96)** [更多關於 **流程圖** 語法 ](http://adrai.github.io/flowchart.js/) # Graphviz ```graphviz digraph hierarchy { nodesep=1.0 // increases the separation between nodes node [color=Red,fontname=Courier,shape=box] //All nodes will this shape and colour edge [color=Blue, style=dashed] //All the lines look like this Headteacher->{Deputy1 Deputy2 BusinessManager} Deputy1->{Teacher1 Teacher2} BusinessManager->ITManager {rank=same;ITManager Teacher1 Teacher2} // Put them on the same level } ``` **[:arrow_right: 看此筆記的原始碼 :arrow_left:](https://hackmd.io/r1p_loXISn69k3t5cYMbtg#Graphviz)** [更多關於 **graphviz** 語法 ](https://github.com/caseywatts/graphviz-tutorial?tab=readme-ov-file#tutorial) # Mermaid ```mermaid gantt title A Gantt Diagram section Section A task :a1, 2014-01-01, 30d Another task :after a1 , 20d section Another Task in sec :2014-01-12 , 12d anther task : 24d ``` **[:arrow_right: 看此筆記的原始碼 :arrow_left:](https://hackmd.io/@docs/use-mathjax-and-UML-zh/edit)** [更多關於 **mermaid** 語法 ](http://mermaid-js.github.io/mermaid) # Abc / 樂譜 ### 範例與步驟 1. 使用程式碼區塊(code block)包覆以下的架構，你可以直接將滑鼠停留在程式碼區塊並一鍵 ``` X:1 T:Speed the Plough M:4/4 C:Trad. K:G |:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA| GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:| |:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df| g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:| ``` 2. 在首行的 ` ``` `後面加上 `abc` 3. 最終渲染出來會呈現 :point_down: ```abc X:1 T:Speed the Plough M:4/4 C:Trad. K:G |:GABc dedB|dedB dedB|c2ec B2dB|c2A2 A2BA| GABc dedB|dedB dedB|c2ec B2dB|A2F2 G4:| |:g2gf gdBd|g2f2 e2d2|c2ec B2dB|c2A2 A2df| g2gf g2Bd|g2f2 e2d2|c2ec B2dB|A2F2 G4:| ```