Skip to content

Instantly share code, notes, and snippets.

@hongyangqin
Last active December 1, 2017 14:27
Show Gist options
  • Select an option

  • Save hongyangqin/dcf6b277aec08f009f4b53e22c908c6c to your computer and use it in GitHub Desktop.

Select an option

Save hongyangqin/dcf6b277aec08f009f4b53e22c908c6c to your computer and use it in GitHub Desktop.

Sublime の 如何实时预览 markdown 文件?

作为 Markdown 书写工具,Sublime 是合格的,不足之一是无法像 Atom 那样做到实时预览;Atom 的实时预览如下图最右侧栏目:


Atom 实时预览
  • 最左侧(Side Bar)(Ctrl+\):文件目录的显示和关闭;和Sublime 类似;
  • 中间是文件编辑;
  • 最右侧(Control+Shift+M):实时预览显示和关闭;
  • 命令板(Control+Shift+P):和 Sublime 类似;
  • Find File(Control+P): 和 Sublime 的 Goto Anything 类似;

目标

本文就是要找到一个合适的 Sublime 插件,来帮助我们做到类似 Atom 实时预览这样的预览:即在编辑过程中就可以实时看到预览效果。如果需要搞个什么动作,包括按个快捷键什么的,才能看到预览效果,那都不算实时预览。

有用?

实时预览对于 markdown 新手快速熟悉语法规则是很有用的。
这也是 简书 预览模式的好处之一。

插件管理工具:package control

使用 Sublime 的优势就在于她的各类 packages 很多,所以很有必要安装这个 package control。可以经常看看有什么好用的插件。
package control 的安装参见 Sublime Text 使用配置

在 package control 输入 markdown preview 搜索
  • Markdown Preview
  • Markdown HTML Preview
  • GitHub Flavored Markdown Preview
  • OmniMarkupPreviewer

这些插件都是在需要预览的时候,敲个快捷键在浏览器里面查看效果。不是我们所要的。

安装 Markmon:real-time markdown preview

要使用这个插件确实要费点劲,安装的东西比较多,这可能是这个插件相对不那么大众的原因(比上面几种的使用量都低)。
Markmon 的意思大概是 Markdown Monitor,作者是 yyjhao

  1. 安装:Tools > Command Palette(命令板) 搜索安装 Markmon
  2. npm 安装 markmon (npm)
    npm install -g markmon,可以参考 node 和 npm 安装使用
  3. 安装 pandoc
    pandoc: a universal document converter.
    这个转换器负责 markdown 语法转到 html 语法,实时监控文件编辑,以便实时预览;
  4. 配置 Package Settings
    Preferences->Package Settings->Markmon->Settings - User,编辑文件如下:
    { "executable": "markmon.cmd", }
  5. 重启 Sublime;

如何使用 Markmon?

通过菜单 Tools > markmo > Launch,或者 Control+Shift+P:Markmon launch。
在浏览器会打开 localhost:3000 页面,对于 Sublime 中的改变,你就会在浏览器中实时看到。

多屏

一般专业人员都是多个屏幕的,所以,Markmon 的实现机制相对 Atom 来说更好,你把预览浏览器拽到另一个屏幕就好了。
如果预览的实时性要求不那么高,其他几种 preview 方案是完全可以接受的。


markmon & sublime
  • Sublime 切换文件的同时,浏览器也会自动跟随切换,方便。

参考


Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment