Sublime の 如何實時預覽 markdown 文件?

作為 Markdown 書寫工具,Sublime 是合格的,不足之一是無法像 Atom 那樣做到實時預覽;Atom 的實時預覽如下圖最右側欄目:

Atom 實時預覽

  • 最左側(Side Bar)(Ctrl+\):文件目錄的顯示和關閉;和Sublime 類似;
  • 中間是文件編輯;
  • 最右側(Control+Shift+M):實時預覽顯示和關閉;
  • 命令板(Control+Shift+P):和 Sublime 類似;
  • Find File(Control+P): 和 Sublime 的 Goto Anything 類似;

目標

本文就是要找到一個合適的 Sublime 插件,來幫助我們做到類似 Atom 實時預覽這樣的預覽:即在編輯過程中就可以實時看到預覽效果。如果需要搞個什么動作,包括按個快捷鍵什么的,才能看到預覽效果,那都不算實時預覽。

有用?

實時預覽對于 markdown 新手快速熟悉語法規則是很有用的。
這也是 簡書 預覽模式的好處之一。

插件管理工具:package control

使用 Sublime 的優勢就在于她的各類 packages 很多,所以很有必要安裝這個 package control。可以經常看看有什么好用的插件。
package control 的安裝參見 Sublime Text 使用配置

在 package control 輸入 markdown preview 搜索
  • Markdown Preview
  • Markdown HTML Preview
  • GitHub Flavored Markdown Preview
  • OmniMarkupPreviewer

這些插件都是在需要預覽的時候,敲個快捷鍵在瀏覽器里面查看效果。不是我們所要的。

安裝 Markmon:real-time markdown preview

要使用這個插件確實要費點勁,安裝的東西比較多,這可能是這個插件相對不那么大眾的原因(比上面幾種的使用量都低)。
Markmon 的意思大概是 Markdown Monitor,作者是 yyjhao

  1. 安裝:Tools > Command Palette(命令板) 搜索安裝 Markmon
  2. npm 安裝 markmon (npm)
    npm install -g markmon,可以參考 node 和 npm 安裝使用
  3. 安裝 pandoc
    pandoc: a universal document converter.
    這個轉換器負責 markdown 語法轉到 html 語法,實時監控文件編輯,以便實時預覽;
  4. 配置 Package Settings
    Preferences->Package Settings->Markmon->Settings - User,編輯文件如下:
    { "executable": "markmon.cmd", }
  5. 重啟 Sublime;

如何使用 Markmon?

通過菜單 Tools > markmon > Launch,或者 Control+Shift+P:Markmon launch。
在瀏覽器會打開 localhost:3002 頁面,對于 Sublime 中的改變,你就會在瀏覽器中實時看到。

多屏

一般專業人員都是多個屏幕的,所以,Markmon 的實現機制相對 Atom 來說更好,你把預覽瀏覽器拽到另一個屏幕就好了。
如果預覽的實時性要求不那么高,其他幾種 preview 方案是完全可以接受的。

markmon & sublime
  • Sublime 切換文件的同時,瀏覽器也會自動跟隨切換,方便。
  • cmd窗口


    Markmon launch會自動打開。若不小心關閉,在編輯文章時還會自動打開。

參考


最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容