MarkdownPreview官方APi 和如何使其支持公式

最新推荐文章于 2024-05-22 22:59:41 发布

独家雨天

最新推荐文章于 2024-05-22 22:59:41 发布

阅读量2.1k

点赞数 2

分类专栏：其它工具文章标签： KaTeX MathJax

本文链接：https://blog.csdn.net/u013019701/article/details/81676018

版权

其它工具专栏收录该内容

2 篇文章 0 订阅

订阅专栏

- Usage

话不多说，先上官方的网站 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 中默认设置。

安装好之后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/katex@0.10.0-alpha/dist/katex.min.js",
            "res://MarkdownPreview/js/katex_config.js"
        ]
    },
    "css": {
        "markdown": [
            "default",                                                            // <- The default Markdown CSS.
            "https://cdn.jsdelivr.net/npm/katex@0.10.0-alpha/dist/katex.min.css", // <- KaTeX CSS
            "res://MarkdownPreview/css/katex_eqnum.css"                           // <- Optional equation numbering CSS
        ]
    },

UML 支持

同样的指出了 GitHub 不支持 UML. 我暂时没有用到该功能，而且感觉用起来也很麻烦，还是老实的截图好啦。
官网说明链接

参考资料

独家雨天

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
MarkdownPreview官方APi 和如何使其支持公式

Usage预览 To preview自定义模板 Custom Templates预览路径 Preview Path Conversion预览临时文件位置 Preview Temp Location添加其它的 Markdown 解析器 Enabling Other External Markdown ParsersConfiguring Python Markdown Extens...
复制链接

扫一扫