Sublime Text3 的 Markdown 实时预览

快来打我* 2023-07-06 06:27 16阅读 0赞

转载自：[https://blog.csdn.net/qq\_20011607/article/details/81370236][https_blog.csdn.net_qq_20011607_article_details_81370236]

## 0. 插件安装基础操作（上一篇文章详述） ##

1.  组合键`Ctrl+Shift+P` 调出命令面板
2.  输入`Package Control: Install Package`，回车
3.  在搜索框中输入要安装的包名（一个一个，不能同时安多个）
4.  静待几秒即可安装成功

## 1.Markdown 相关插件介绍 ##

<table style="width:634px;">  markdown 相关的几种插件  
 <tbody> 
  <tr> 
   <td style="width:164px;">插件</td> 
   <td style="width:468px;">功能</td> 
  </tr> 
  <tr> 
   <td style="width:164px;">MarkdownEditing</td> 
   <td style="width:468px;">一个提高Sublime中Markdown编辑特性的插件</td> 
  </tr> 
  <tr> 
   <td style="width:164px;">MarkdownPreview</td> 
   <td style="width:468px;">Markdown转HTML，提供在浏览器中的预览功能</td> 
  </tr> 
  <tr> 
   <td style="width:164px;">LiveReload</td> 
   <td style="width:468px;">一个提供md/html等文档的实时刷新预览的的插件</td> 
  </tr> 
 </tbody> 
</table>

## 2 MarkdownEditing ##

顾名思义，Markdown编辑器，是Markdown写作者必备的插件，不仅可以高亮显示Markdown语法还支持很多编程语言的语法高亮显示。 特别注意：MarkdownEditing只针对 md\\mdown\\mmd\\txt 格式文件才启用。

MarkdownEditing 从视觉和便捷性上针对 Markdown 文档的编辑进行了一系列的优化。如：

*  颜色方案仿 Byword及iA writer
 *  自动匹配星号（\*）、下划线（\_）及反引号（\`）
 *  选中文本按下以上符号能自动在所选文本前后添加配对的符号
 *  方便粗体、斜体和代码框的输入

## 3 MarkdownPreview ##

### **3.1 功能** ###

*  支持在浏览器中预览markdown文件
 *  将md文件导出为html代码

### 3.2 将md文件用浏览器预览——1.常规方法 ###

1.  组合键 Ctrl+Shift+P 调出命令面板
2.  输入mdp找到并选中Markdown Preview： Preview in Browser
3.  出现两个选项：github和markdown。任选其一即可，github是利用GitHub的在线API来解析.md文件，支持在线资源的预览，如在线图片它的解析速度取决于你的联网速度。该方式据说一天只能打开60次。markdown就是传统的本地打开，不支持在线资源的预览。
4.  默认浏览器中显示预览结果

### 3.3 将md文件用浏览器预览——2.用快捷键打开 ###

Sublime Text支持自定义快捷键，Markdown Preview 默认没有快捷键，我们可以自己为Markdown Preview： Preview in Browser设置快捷键。 方法是在 Preferences -> Key Bindings 打开的文件的右侧栏的中括号中添加一行代码：

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

如下所示：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppbl9Ld29r_size_16_color_FFFFFF_t_70][]

解释：

"alt+m" 可设置为自己喜欢的按键。 
    "parser": "markdown"也可设置为"parser":"github"，改为使用Github在线API解析markdown。

以上两种方式都有个问题：每次预览都要打开一个新的网页，而且需要手动操作。有没有一个方法，可以打开一个网页后，之后再也不用管，让它实时刷新预览呢？

有，还很简单，答案就是MarkdownPreview+LiveReload！   
LiveReload是一个可实时刷新的插件，不仅可用于Markdown，也可用于HTML等。

## 4. 实时自动刷新预览：MarkdownPreview + LiveReload ##

### 4.1 先安装并配置Markdown Preview ###

如前 Markdown Preview 安装成功后，设置前文所述的快捷键（如需），打开其配置文件 Preferences -> Package Settings -> Markdown Preview -> Settings，检查左侧 enable\_autoreload 条目是否为true，若是，跳过。若不是，右侧栏加一条下面这个后重启Sublime:

{
        "enable_autoreload": true
    }

### 4.2 安装并配置LiveReload ###

Ctrl+Shift+p, 输入 Install Package，输入LiveReload, 回车安装   
安装成功后, 再次Ctrl+shift+p, 输入LiveReload: Enable/disable plug-ins, 回车, 选择 Simple Reload with delay (400ms)或者Simple Reload，两者的区别仅仅在于后者没有延迟。

### 4.3 开始使用 ###

如前面提到的手动或者快捷键打开预览网页，之后便再也不用管它，只要你的sublime保存一次，网页那边就会自动刷新预览，美滋滋。但是呢，有个遗留的问题：网页预览不能跟随你的sublime编辑位置，还需要你滑动页面。 在这一点上，CSDN-Markdown可以说很优秀了，本文就是在该编辑器下完成的。

[https_blog.csdn.net_qq_20011607_article_details_81370236]: https://blog.csdn.net/qq_20011607/article/details/81370236
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppbl9Ld29r_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/202002162310110.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0ppbl9Ld29r,size_16,color_FFFFFF,t_70