sublime3实现markdown在chrome中实时预览,解决livereload无效问题。

需要插件

  • 语法高亮 Markdown Editing
  • 实时预览(使用浏览器预览) Markdown Preview
  • 热加载 LiveReload
  • chrome 浏览器扩展 LiveReload

使用方法

解决liveReload无效问题:chrome安装liveReload扩展后直接跳到第3步配置sublime和chrome中的liveReload。

  1. sublime和chrome分别安装上述对应插件和扩展,这里不再赘述。
  2. Markdown Preview配置
    1. 使用快捷键打开浏览器预览。
      Preferences -> Key Bindings打开的文件中的右边部分添加

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

      其中alt+m可以改成自己想要的快捷键、"parser":"markdown"中的markdown可以修改为github

      github是利用GitHub的在线API来解析.md文件,支持在线资源的预览,如在线图片它的解析速度取决于你的联网速度。该方式据说一天只能打开60次。markdown就是传统的本地打开,不支持在线资源的预览。

    2. 开启实时预览
      打开其配置文件Preferences -> Package Settings -> Markdown Preview -> Settings,检查左侧enable_autoreload条目是否为true,若是,跳过。若不是,右侧栏加一条下面这个后重启Sublime:

      {
      "enable_autoreload": true
      }
      
  3. sublime中LiveReload配置
    1. 打开 ctrl + shift + p,输入 LiveReload: Enable/disable plug-ins,选择 Enable: Simple Reload
    2. 打开preferences->packge settings ->livereload->settings-user,修改为如下
      {
          "enabled_plugins": [
              "SimpleReloadPlugin",
              "SimpleRefresh"
          ]
      }
      
  4. sublime配置MarkdownEditing样式
    preferences->packge settings ->Markdown Editing->Markdown GFM settings - user
    {
    	"color_scheme": "Packages/MarkdownEditing/MarkdownEditor-Dark.tmTheme",//黑色主题
    
    	// Layout
    	"draw_centered": false,//文字居左
    	"word_wrap": true,
    	"wrap_width": 120,//每行最大文字量
    	"rulers": []
    }
    
  5. 配置chrome扩展
    1. 扩展管理中允许该扩展访问文件地址。
    2. 打开页面后点击扩展图标,使图标中心圆点为实心。

你可能感兴趣的:(sublime)