15

让Sublime Text3 支持 Markdown 且可以实时预览

 3 years ago
source link: https://blog.csdn.net/qq_42133509/article/details/85990048
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

注意:因为本人自己想记录一下,但自己又懒得去总结整理,就去网上搜了一些相关的内容

以下内容全摘自 https://blog.csdn.net/qq_20011607/article/details/81370236

主要有三个插件:

插件功能MarkdownEditing一个提高Sublime中Markdown编辑特性的插件MarkdownPreviewMarkdown转HTML,提供在浏览器中的预览功能LiveReload一个提供md/html等文档的实时刷新预览的的插件

1. MarkdownEditing

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

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

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

2. MarkdownPreview

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

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

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

将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"}  }

(以上的代码块要全部放到里面,包括大括号)

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

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

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

4. (最强)实时自动刷新预览:MarkdownPreview + LiveReload

先安装并配置Markdown Preview

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

{
    "enable_autoreload": true
}

安装并配置LiveReload

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

如前面提到的手动或者快捷键打开预览网页,之后便再也不用管它,只要你的sublime保存一次,网页那边就会自动刷新预览,美滋滋。

但是呢,有个遗留的问题:网页预览不能跟随你的sublime编辑位置,还需要你滑动页面。

注:以上内容全摘自 https://blog.csdn.net/qq_20011607/article/details/81370236


About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK