markdown一邊寫一邊預覽_markdown實作實時預覽的效果

markdown實作實時預覽的效果

找尋了很久相關的插件,這裡我使用的是Markmon這個插件

官方網站給出的效果，(⊙o⊙)…本來是個動圖，這裡無法顯示。。

1441267015781.png

Sublime編輯器的安裝

我自己使用的Sublime的版本是Sublime Text3

Package Controll的安裝

安裝Sublime的Markmon的插件

這裡可以采用兩種方法，一是在Sublime的插件Repository中直接找到這個插件安裝

1441266892131.png

，還有一種方法就是直接下載下傳壓縮吧，解壓到Sublime的Data/Packages目錄下即可

1441267283586.png

pandoc的安裝

pandoc的作用主要是将我們的markdown檔案轉換成html，這樣就可以在浏覽器中實時預覽我們的檔案渲染效果。當然，pandoc還有許多其他的功能，比如它也支援将markdown檔案輸出成pdf等，給出他的下載下傳連結

網址：http://pandoc.org/installing.html

nodejs的安裝

nodejs的安裝主要是要用到他的npm的功能為我們的下一步安裝Nodejs包Markmon做準備

markmon的安裝

隻需要在指令行中輸入

npm install -g markmon

注意要輸入 -g 這個參數，它代表在全局中安裝該markmon的指令

最後重新開機Sublime Text

重新開機之後你會看到在tools下面會多出markmon的啟動和停止的菜單項點選相應的按鈕即可

1441267724626.png

最終實作的效果

1441266190723.png

安裝中碰到的問題

QQ截圖20150903152228.png

我在安裝的時候碰到Markmon的伺服器一直啟動失敗,如截圖所示。後來參考國外論壇的讨論Error 'Uncaught Error: spawn pandoc ENOENT' #14說是執行pandoc指令的時候找不到相應的指令，問題在于路徑以及環境變量。

打開如下圖所示的檔案

1441267867116.png

在command中明确pandoc指令所在目錄即可.

{

//On Windows try "markmon.cmd" if you get errors.

//If markmon is not on your path you'll need to use a full path to it

"executable": "markmon",

"port": 3000,

"pandoc_path": "",

"command": "D:\\Pandoc\\pandoc -t HTML5 --mathjax",

"stylesheet": null,

"projectdir": null

}

參考資料

補充一下文章中的版本情況

markmon - v0.0.7

node.js - v4.2.3

pandoc-v1.15.0.6

引用和版權說明

歡迎大家分享、轉發。在聯系原作者并标明出處及原連結，保留作者署名，非商業應用，相同方式共享，本文歡迎轉載。非經授權許可，禁止轉載。本文采用 CC BY-NC-SA 4.0授權。