阅读 9694

Sublime Text3 Markdown 编辑 + 实时预览

说明

本文讲的是如何用 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 EdittingLiveReload
  • 3、修改配置项

    • 1)将 Markdown Previewenable_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"} }