最近偶爾會幫一些舊文章補圖，通常是些表格阿、圖表之類的，但又懶得真的一張一張的去做圖、調整格式，這時我的腦筋就動到了只需要簡單文字編輯的 Markdown 身上啦。找了幾個能夠即時預覽 markdown 的線上編輯器，發現目前最得我心的是 StackEdit ，對markdown支援的語法很多、顯示起來又直覺美觀，算是易用性滿高的一款的所見即所得(WYSIWYG)工具。
StackEdit直覺友善的編輯與預覽頁面
一進到編輯頁面(https://stackedit.io/app#)，就能看到分割成左右兩欄的編輯區與預覽區，並且將使用說明直接用markdown格式寫在上面。如果想要編輯看看效果，也能直接在左側欄修改，產生的結果也會立即show在右手邊的相對位置上。
左上有一排簡易的格式工具列，方便突然忘記任何markdown語法時直接點來用 (如果你是正在學習熟悉markdown語法環境的朋友，這介面亦很是友善)。一些常見的像是粗體、斜體、標題階層、有序與無序清單、checklist、引言、程式碼演示、表格、超連結、圖片等，也算是覆蓋了大部分的使用場景。
Markdown 語法擴充
與其他markdown預覽工具相比，StackEdit有個很棒的地方是它已經預先把一些實用的擴充語法拉進來了，而不必使用者再另外去找，真的很方便！
SmartyPants
能夠自動將ASCII字元轉為html格式的標點符號，比如單引號、雙引號、以及en與em格式的破折號轉換等：
LaTeX
可以透過 KaTeX 這套library在網頁上直接實現 LaTeX 的排版效果。這對於想要書寫數學、物理、化學等公式特別有用：
UML diagrams
除此之外，StackEdit 還引入了 Mermaid ，只需要幾行markdown就能精確表達並生成具有標準格式的各式 UML diagrams。
比如一個具有三個互動對象的時序圖(sequence diagram)，只要輸入以下：
```mermaid
sequenceDiagram
Alice ->> Bob: Hello Bob, how are you?
Bob-->>John: How about you John?
Bob--x Alice: I am good thanks!
Bob-x John: I am good thanks!
Note right of John: Bob thinks a long<br/>long time, so long<br/>that the text does<br/>not fit on a row.
Bob-->Alice: Checking with John...
Alice->John: Yes... John, how are you?
```
就能生成像這樣的圖：
或是如果想要生成一個漂亮的流程圖也是完全OK：
```mermaid
graph LR
A[Square Rect] -- Link text --> B((Circle))
A --> C(Round Rect)
B --> D{Rhombus}
C --> D
```
你能想像這樣的圖，只需要用幾行文字就能精確表達並生成嗎？應付不太複雜的圖表需求真是省時省力，感謝天~讓我們在有生之年相遇啊~~(轉圈圈)
下載&贊助
說了這麼多，那這個 StackEdit 的收費是多少呢？由於它屬於一個open source專案，所以是完全免費的 (好佛阿！大心！)，不過團隊也接受自願贊助(只要 5 美金)，如果用了喜歡也不妨順手斗內他們一下唷。
Github：https://github.com/benweet/stackedit/
