markdown語法介紹

###### tags `markdown` # markdown語法介紹 ## 標題 :::success `# 第一階` `## 第二階` `### 第三階` `#### 第四階` `##### 第五階` `###### 第六階` ::: ## 項目符號 & 編號 :::success `* AAA` `1. aaa` ::: ## 待辦事項 :::success ` - [ ]` ::: ## 引用 `> aaaa` ## 字體 :::success `**AAA** 粗體` `*AAA* 斜體` `~~AAA~~ 刪除線` `19^th^ 上標` `H~2~O 下標` `++AAA++ 底線` `==AAA== 標記文字` `要變藍色的文字放這裡` ::: ## 換行 :::success `\` ::: ## 超連結 :::success `[顯示文字](連結網址)` `[yahoo](http://tw.yahoo.com)` ::: ## 顯示圖片 :::success `![圖片說明](圖片網址)` `![樹林](http://img02.tooopen.com/images/20151221/tooopen_sy_152222546984.jpg)` `![](http://img02.tooopen.com/images/20151221/tooopen_sy_152222546984.jpg =100x) 自訂圖片大小 ` `![](http://img02.tooopen.com/images/20151221/tooopen_sy_152222546984.jpg =300x300) 自訂圖片大小 ` ::: ## 顯示程式碼 :::success ` ```python= ` ` import os ` ` print("hello") ` ``` ` ::: ## 表情圖案 :::success `:smile:` :smile: [表情圖案列表](https://www.webpagefx.com/tools/emoji-cheat-sheet/) ::: ## 嵌入媒體 :::success youtube: `{%youtube QC1yP4QrsyA %}` \ vimeo: `{%vimeo 124148255 %}` \ pdf: `{%pdf https://www.cca.edu/sites/default/files/pdf/08/word-to-pdf.pdf %}` ::: ## 區塊 :::success `:::success` `:::` \ `:::info` `:::` \ `:::warning` `:::` \ `:::danger` `:::` ::: :::info ## 水平線 :::success `---` ::: ## 註解 :::success `This is [an example][id] reference-style link.` `[id]: http://example.com/ "Optional Title Here"` ::: ## 表格 :::success `| 姓名 | 地址 |` `| ------------- | ------------- |` `| 曉明 | aaaaaaaaaaaaa |` `| 阿志 | bbbbbb |` \ \ `| 姓名 | 地址 |` `| -------------: | :-------------: |` `| 曉明 | aaaaaaaaaaaaa |` `| 陳阿志 | bbbbbb |` ::: ## 外加圖示 [fontawesome](http://fontawesome.io/icons/) `` ## markdown to pdf 1. 點「發表」 2. 按「ctrl-P」 3. 在目的點「變更」，點「另存為PDF」 4. 點「儲存」 5. 存到你想放的位置 ## 標籤 ` tags: `功能` `酷` `更新` ` ## 畫圖 ### Sequence ```sequence Alice->Bob: Hello Bob, how are you? Note right of Bob: Bob thinks Bob-->Alice: I am good thanks! ``` --- ### Flowchart ```flow st=>start: 開始 op=>operation: 打開網路 cond=>condition: 網路是否有通? e=>end: 結束 st->op->cond->op2 cond(yes)->e cond(no)->op ``` ```flow st=>start: Start:>http://www.google.com[blank] e=>end:>http://www.google.com op1=>operation: My Operation sub1=>subroutine: My Subroutine cond=>condition: Yes or No?:>http://www.google.com io=>inputoutput: catch something... st->op1->cond cond(yes)->io->e cond(no)->sub1(right)->op1 ``` --- ### Mermaid ```mermaid %% Example of sequence diagram sequenceDiagram Alice->>Bob: Hello Bob, how are you? alt is sick Bob->>Alice: Not so good :( else is well Bob->>Alice: Feeling fresh like a daisy end opt Extra response Bob->>Alice: Thanks for asking end ``` --- ### Flowchart ```mermaid graph LR A[Hard edge] -->B(Round edge) B --> C{Decision} C -->|One| D[Result one] C -->|Two| E[Result two] ``` --- ### Gantt ```mermaid gantt dateFormat YYYY-MM-DD title Adding GANTT diagram functionality to mermaid section A section Completed task :done, des1, 2014-01-06,2014-01-08 Active task :active, des2, 2014-01-09, 3d Future task : des3, after des2, 5d Future task2 : des4, after des3, 5d section Critical tasks Completed task in the critical line :crit, done, 2014-01-06,24h Implement parser and jison :crit, done, after des1, 2d Create tests for parser :crit, active, 3d Future task in critical line :crit, 5d Create tests for renderer :2d Add to mermaid :1d section Documentation Describe gantt syntax :active, a1, after des1, 3d Add gantt diagram to demo page :after a1 , 20h Add another diagram to demo page :doc1, after a1 , 48h section Last section Describe gantt syntax :after doc1, 3d Add gantt diagram to demo page : 20h Add another diagram to demo page : 48h ``` ## 參考 [hackmd.io 語法介紹](https://diabolo94.github.io/2017/11/18/hackmdio/) [markdown 與法介紹](https://hackmd.io/CwYwhgzAbApgHFAtHAnAIzY4awBNkwCsA7ImFCBCHAIxwBMhhIQA?both) [flowchart官網](http://flowchart.js.org) [Draw Diagrams With Markdown](http://support.typora.io/Draw-Diagrams-With-Markdown/) [mermaid](https://mermaidjs.github.io)