目前為止最好的Markdown編輯器,我選擇Visual Studio Code

主要需求

關(guān)于Markdown編輯器的事情,其實(shí)已經(jīng)更換過好多了,因?yàn)橥耆也坏胶糜玫?,目前的訴求如下:

a. 支持PlantUML語法?!壳斑@個(gè)訴求已經(jīng)擠到第一位了,因?yàn)樵诠ぷ髦挟媹D的場景實(shí)在是太多了,當(dāng)前主要工作是做架構(gòu)設(shè)計(jì),大量的文檔要寫。
b. 支持自動(dòng)生成標(biāo)題的序號(hào),默認(rèn)的Markdown語法的標(biāo)題是不含序號(hào)的。
c. 支持自動(dòng)生成目錄的語法
d. 支持嵌入代碼,代碼支持各種語言的語法高亮
e. 支持使用<font>,<br>等HTML標(biāo)簽
f. 支持Latex語法。

語法參考

針對Markdown編寫過程中常用的各種語法,因?yàn)槟昙o(jì)大了也會(huì)經(jīng)常忘記,常常需要查閱資料,主要資料如下:

VSC配置

最終我使用了Visual Studio Code,點(diǎn)擊這里下載。安裝后,還需要在VSC的Extension中安裝一些插件來豐富這些功能,目前安裝的包括:

  1. Markdown All In One——主要的Markdown增強(qiáng)插件,該插件已經(jīng)實(shí)現(xiàn)了上述#a,#c,#d,#e,#f功能。
  2. Markdown Preview Enhanced——用于在VSC中預(yù)覽Markdown效果,默認(rèn)的預(yù)覽效果比較差,而且也不支持目錄。而且這個(gè)插件也支持導(dǎo)出為PDF

PS: 前兩個(gè)插件的作者都是中國人,感嘆最近真是國力強(qiáng)大啊,各行各業(yè)都充斥著人才。。。

針對插件#1,主要增強(qiáng)的地方有:

  1. 支持[TOC]自動(dòng)生成目錄(略)
  2. 支持Latex語法(略)
  3. 支持嵌入代碼,代碼支持各種語言的語法高亮(略)
  4. 支持使用<font>,<br>等HTML標(biāo)簽(略)
  5. 支持PlantUML語法,使用效果為:
image.png

針對插件#2,點(diǎn)擊這個(gè)按鈕就可以啟用VSC內(nèi)預(yù)覽功能。

image.png

這個(gè)插件可以支持內(nèi)置多種高級(jí)功能,現(xiàn)在常用的主要就是plantUML了,畢竟其他幾個(gè)畫圖的太丑。。。

介紹原文:

Introduction

Markdown Preview Enhanced is an extension that provides you with many useful functionalities such as automatic scroll sync, math typesetting, mermaid, PlantUML, pandoc, PDF export, code chunk, presentation writer, etc. A lot of its ideas are inspired by Markdown Preview Plus and RStudio Markdown.

https://shd101wyy.github.io/markdown-preview-enhanced/#/diagrams?id=plantuml

這里寫使用PlantUML需要安裝 Graphviz

You can install Graphviz (not required) to generate all diagram types.

針對插件#3,在文檔中點(diǎn)擊右鍵,選擇Markdown Sections: Insert/Update就可以自動(dòng)給每個(gè)菜單增加序號(hào)了。

image.png

導(dǎo)出為PDF

先選擇使用Markdown Preview Enhanced插件預(yù)覽,點(diǎn)擊下面按鈕:

image.png

預(yù)覽后點(diǎn)擊右鍵選擇輸出為PDF,這里可以選擇多個(gè)編譯器輸出PDF,包括Prince、Chrome、eBook、Pandoc,最后看哪個(gè)輸出效果好就行了。

image.png

--updated 2021/1/22

近期出現(xiàn)了畫甘特圖和餅圖需求,plantuml不支持,可以用mermaid替換,也是腳本畫圖工具。語法參考:About mermaid (mermaid-js.github.io)

如果實(shí)在是圖過于復(fù)雜,也可以先用draw.io畫好生成矢量圖svg,再嵌入到markdown中,svg可以直接編輯。地址:diagrams.net

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

友情鏈接更多精彩內(nèi)容