话不多说,先上官方的网站 https://facelessuser.github.io/MarkdownPreview/ 和该插件在GitHub 上的连接 https://github.com/facelessuser/MarkdownPreview/ 。该插件可以让我们在 sublime 中非常棒的书写体验,而且不需要你每次都对 md 文档进行实时预览。当然你也可以配合其他同类的软件进行实时的预览,但是在我对 Markdown 语法比较熟悉之后,我并不喜欢这种实时预览的方式,主要原因在于实时预览比较消耗性能,并没有直接码MD快速。更重要的是,很多时候自带的一些Markdown编辑器总是无法满足我自己的需求。比如,转换成公众号的排版,快速的插入本地和网络图片、latex语法的支持。
如果说大家并不喜欢折腾的Markdown语法爱好者,我觉得 Typora 算是我用过的 MD 编辑器中最好用且功能最全,最重要的是还免费。 附上Typora 的下载链接让各位看官自行下载。
喜欢 MarkdownPreview 的主要原因只有一个,让写MD文档和写代码一样简单。
在这里我主要翻译一下Markdown Preview 官网上的英文使用用法,让自己对这个插件的使用更加的深入。
Usage
安装参考: https://packagecontrol.io/packages/MarkdownPreview 中的介绍
PS: 2018/8/14 最新的 MarkdownPreview 中的版本测试过,是没有问题的。
在有网的情况下:
- 打开命令面板,快捷键是 (ctrl+shift+p)
- 在面板中输入如下命令,
Package Control: Install Package
- 选中后再次输入
MarkdownPreview
就可以查询到 MarkdownPreview 插件 - 按下 enter 键就可以在线进行安装。
离线安装,直接可以自行百度
提示
在安装好插件后,在 sublime 中的找到
Preferences->Package Settings->MarkdownPreview
.中找到设置。其中 User 表示用户设置,default 表示 MarkdownPreview 中默认设置。
预览 To preview
当你像我这样码号MD之后,使用 Cmd+Shift+P
就可以展示如下的命令。按照需求选择其中一个就可以解析你的MD文档。各个命令解释如下
- Markdown Preview: Preview in Browser
- Markdown Preview: Export HTML in Sublime Text
- Markdown Preview: Copy to Clipboard
- Markdown Preview: Open Markdown Cheat sheet
各个操作的效果,各位看官可以自己动手操作试试,没有别的明确需求就选第一个 Markdown Preview: Preview in Browser,将会在默认的浏览器中打开你的md渲染后的html文件。
上面的这些操作都已经默认的绑定了快捷键,你可以在也在 Preferences --> Keybindings
中设置快捷键。添加如下命令,绑定 alt+m
快捷键。
{ "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} },
自定义模板 Custom Templates
默认的情况下,MarkdownPreview 使用的是一个简单模板,但你可以通过 setting 中的 html_template
选项来指定你自己的模板绝对路径。可以参考安装目录下的 Data/Installed Packages/MarkdownPreview.sublime-package
中的MarkdownPreview/samples/customized-template-sample.html"
文件。
预览路径 Preview Path Conversion
通常的我们的路径存在『相对路径』和『绝对路径』。在设置中两个地方需要指定,对于图片我们还可以指定为 base64
格式,该格式会将本地的文件嵌入到html文件中,对于不是很大的文件这种方式我个人是最喜欢的。这样我将html直接复制到别的地方就不会出现文件找不到情况。
"image_path_conversion": "base64",
"file_path_conversions": "absolute",
预览临时文件位置 Preview Temp Location
通常就是系统将渲染后的 html 文件存放的临时目录,根据渲染后的网页,在浏览器中打开的网址就可以判断出,默认就是系统的临时目录。当然你也可以更改该路径来符合你的需求。
"path_tempfile": "/tmp/my_notes",
添加其它的 Markdown 解析器 Enabling Other External Markdown Parsers
在 MarkdownPreview 中默认的设置 markdown_binary_map
选项,每一个选项中都包含了key-value 的结构。key 就是新的解析器名称,value 是一个数组,其中第一项是表示该解释器的位置,后面依次跟着
该解析器期望给出的参数。 默认的三个解析器为 Markdown, GitHub, gitlab。 这个 markdown
是一个离线的解析器,默认我就习惯使用这个。 其它的两个,都是调用了网络上对应网址的APi来进行解析的。
"markdown_binary_map": {
"multimarkdown": ["/usr/local/bin/multimarkdown", "--some-option", "some-value"]
},
该解析器可以在 enabled_parsers
属性中添加,这样在就可以在解析时指定
"enabled_parsers": ["markdown", "github", "gitlab", "multimarkdown"],
Configuring Python Markdown Extensions
Python Markdown 扩展很多Markdown 插件,也可以使用许多第三方扩展。 markdown_extensions
选项是他们导入路径的一种形式。
支持公式
支持 latex 公式,主要在官网的扩展中提到。默认情况设置下,是不支持 latex 渲染的。
支持 MathJax
首先需要申明的是,GitHub 和 GitLab 解析器是不支持 MathJax 的语法的。所以,如果你开启了MathJax 功能,但是却调用了 GitHub 或者 GitLab API 来解析,有可能会导致转换该 MathJax 语法时出现问题。
开启方式就是在用户设置文档中增加如下内容。官网上面设置的语法存在一个逗号的错位问题。你需要将下面的配置,加入到
markdown_extensions
属性配置中。
"markdown_extensions": [
// MathJax Support(支持 Latex)
// Danger!!! GitHub and GitLab is not supported with MathJax.
// You will have to come up with a MathJax config that works for
// it and escape problematic syntax that GitHub may try to convert.
{
"pymdownx.arithmatex": {
"generic": true,
}
},
]
只加入上面的语句,只是表示你开启了Math公式解析的支持,还需要指定 MathJax 或者 LaTex 渲染库的位置(js语法不清楚,也不知道这样解释是否正确)。 在同样的配置文件中,指定 js
属性。
"js": {
"markdown": [
"https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
"res://MarkdownPreview/js/math_config.js"
],
"github": ["default"],
"gitlab": ["default"]
}
你也可以自定义指定 MathJax 库中的位置。
KaTeX 的支持
GitLab 默认是已经支持了 KaTex. 我们只需要在 Js 和 CSS 属性中添加就可以啦。同样的GitHub是不支持的。
同样,按照上面的思路,将将 Js 替换,在这里还增加了 CSS 属性。
"js": {
"markdown": [
"https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.js",
"res://MarkdownPreview/js/katex_config.js"
]
},
"css": {
"markdown": [
"default", // <- The default Markdown CSS.
"https://cdn.jsdelivr.net/npm/[email protected]/dist/katex.min.css", // <- KaTeX CSS
"res://MarkdownPreview/css/katex_eqnum.css" // <- Optional equation numbering CSS
]
},
UML 支持
同样的指出了 GitHub 不支持 UML. 我暂时没有用到该功能,而且感觉用起来也很麻烦,还是老实的截图好啦。
官网说明链接