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授權。