前言
最近準備搭建一個簡單的文檔平臺，用於組內的文檔管理。作為一個程序員，大多數情況下咱們寫文檔使用的都是markdown語法，比如wiki、hexo、github，然後在瀏覽器上展示。
目前大部分的編輯器都有自己的markdown插件並支持實時預覽，如下圖，
圖1
此圖是vscode編輯器，左側是markdown文件，右側是實時預覽的界面，咱們這次的目標就是將markdown在瀏覽器上展示成這個樣式。
marked
為了將markdown在瀏覽器上展示就必須先將markdown轉化為html，有了明確的需求就可以去網上搜尋一下工具，我們很容易就能找到一個使用非常頻繁的工具——marked。
圖2
如圖2，它支持在頁面中編譯markdown代碼，但是我們更希望先在後臺完成編譯的工作再將編譯的產物放到頁面中使用，這樣頁面的性能會提示一丟丟，因此我們使用它的node方式。
圖3
如圖3，node編譯markdown的步驟也十分簡單，僅需以下幾步，
- 配置marked參數
- 讀取md內容
- 編譯
圖4
如圖4，左側是markdown編譯後的html，右側是在瀏覽器中展示的情況，此時完全沒有任何樣式，所以我們還需要為它配置主題。我們選用最流行的樣式——github-markdown-css，把它引入到文件中，再看看效果。
圖5
現在頁面已經有樣式了，和github的readme展示的樣式一樣，但是你會發現兩個問題，
- 有些markdown語法不支持，比如表格
- 代碼片段並沒有高亮，如圖5
注意：編譯產物最外層需要包一層容器，容器的class名字為markdown-body，否則樣式不生效。
markdown-it
為了解決上面第一個問題，我們將marked模塊換成markdown-it模塊，用法如下，
圖6
此時markdown的大部分語法都已經支持了，但仍有個別語法不支持，不過不要緊，我們可以將markdown-it的html參數設置為true，這樣用戶可以直接用html語法寫markdown。
prism.js
代碼塊沒有高亮是不可接受的，這會讓同志們的瀏覽慾望大大降低。對比了一下highlight.js，我選擇了prism.js。不為別的，就是因為它滿足了我的要求。有人說prismjs比highlight.js對樣式控制的更精細，不過I don't care it。
圖7
如圖7，我一眼就看中了這個主題，有趣。那還等什麼，直接把js和css都down下來，引入頁面。現在咱們再去看看效果，如下圖，
圖8
和我的編輯器主題一樣。
到這裡我們已經完成了我們的需求。
總結
將markdown轉化為html其實就兩步，一是選擇編譯工具，需要儘可能多的支持markdown語法，二是選主題，需要看著養眼。
喜歡我的文章就關注我吧，有問題可以發表評論，我們一起學習，共同成長！
