Sublime Text3 Markdown 編輯 + 實時預覽

說明

本文講的是如何用 Sublime 編輯 markdown，並在 瀏覽器 中實時預覽。 若是你想要的是在 Sublime 中實時預覽，這邊文章可能並非很適用。
先來一張效果圖：

須要的插件

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

設置步驟

• 一、安裝 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)
    複製代碼

• 二、安裝插件

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

    

  • 2）在插件列表中，選擇搜索 markdown preview

    

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

• 三、修改配置項

  • 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。

• 四、設置預覽快捷鍵
  選擇 Preferences — Key Bindings-User，將下面的內容添加進去：
  { "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} }