Sublime Text3 Markdown 編輯 + 實時預覽

摘要： 本文講的是如何用 Sublime 編輯 markdown，並在 瀏覽器 中實時預覽。 如果你想要的是在 Sublime 中實時預覽，這邊文章可能並不是很適用。 先來一張效果圖： 需要的外掛 Markdown Editting主要用來做 Mark...

本文講的是如何用 Sublime 編輯 markdown，並在 瀏覽器 中實時預覽。 如果你想要的是在 Sublime 中實時預覽，這邊文章可能並不是很適用。

先來一張效果圖：

需要的外掛

• Markdown Editting
  主要用來做 Markdown 編輯時的語法高亮，視覺效果更好
• Markdown Preview
  用來在瀏覽器中預覽效果
• LiveReload
  熱載入

設定步驟

• 1、安裝 Package Control（如果已安裝，請忽略此步驟）

  • 1）開啟控制檯 使用 ctrl + 或者 View -> show console` 開啟控制檯。

  • 2）複製下面程式碼到 console 中（或者去官網 複製）

    import urllib.request,os,hashlib; h = '6f4c264a24d933ce70df5dedcf1dcaee' + 'ebe013ee18cced0ef93d5f746d80ef60'; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); by = urllib.request.urlopen( 'http://packagecontrol.io/' + pf.replace(' ', '%20')).read(); dh = hashlib.sha256(by).hexdigest(); print('Error validating download (got %s instead of %s), please try manual install' % (dh, h)) if dh != h else open(os.path.join( ipp, pf), 'wb' ).write(by)
    複製程式碼

• 2、安裝外掛

  • 1） ctrl + shift + p 選擇 Package Control: Install Packge

    

  • 2）在外掛列表中，選擇搜尋 markdown preview

    

  • 3）重複上面兩步分別安裝 Markdown Editting 和 LiveReload

• 3、修改配置項

  • 1）將 Markdown Preview 的 enable_autoreload 設定為 true
    開啟 Preferences – Package Settings – Markdown Preview – Setting ，在 user 設定中新增：

    {
    "enable_autoreload": true,
    }
    複製程式碼

  • 2）啟用 LiveReload
    開啟 ctrl + shift + p ，輸入 LiveReload: Enable/disable plug-ins ，選擇 Enable: Simple Reload 。

• 4、設定預覽快捷鍵

  選擇 Preferences — Key Bindings-User ，將下面的內容新增進去：

  { "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} }