Sublime Text+Markdown Preview+Live Reload+MathJax实现md实时预览

需求

最近使用sublime在写一个md的文件，想实时的查看显示的效果，最后找到这么一个方案。而且，因为后边又需要显示大量的数学公式（LaTeX格式），则需要开启MathJax。

步骤

Package Control

这个就不用多说了，想要下载插件，先要安装好Package Control。

Markdown Preview

使用快捷键cmd+shift+p，输入install package，然后查找到markdown preview安装即可。这个插件可以将md转换为html在浏览器中进行预览。

我们有两种方式，可以在浏览器中预览md：
①同样的使用快捷键cmd+shift+p，输入选择Markdown Preview： Preview in Browser，然后出来3个选项github,gitlab和markdown，这里任意选择一个即可。
②我们也可以使用快捷键去进行预览，这个插件本身并没有快捷键，就需要我们自己去添加。打开Preferences——>key bindings，然后在Default(OSX).sublime-keymap—User中，添加：

[
	{
		"keys": ["ctrl+p"], /*这里输入你的组合键，我这里设置的是ctrl+p*/
		"command": "markdown_preview", 
		"args": {
			"target": "browser",
			"parser": "markdown" /*这里使用本地解析*/
		}  
	}
]

Live Reload

上边虽然可以在浏览器中预览，但是不是实时的，比如我们在输入编辑md之后，需要我们不断的保存，然后键入ctrl+p去看我们的展示结果。

同样的，先install live reload，这里就略过了！

在使用Live Reload之前，需要我们的Markdown Preview开启autoreload。查看Preferences->Package Settings->Markdown Preview->Settings，在左侧默认设置中找到enable_autoreload是否为true，一般就是true，如果不是true，则在右侧用户设置中添加:

{
    "enable_autoreload": true
}

然后，就可以启用Live Reload插件了！同样使用cmd+shift+p, 输入选择LiveReload: Enable/disable plug-ins，之后选择Simple Reload即可，就可以实时预览了，（还有一个with delay 400ms，顾名思义就是延迟400ms）。然后你在修改编辑md之后，保存完，浏览器就自动刷新了！

以上参考：https://blog.csdn.net/qq_20011607/article/details/81370236

MathJax

由于文件中需要编译大量的数学公式，就需要启用MathJax。但是折腾了好久啊，预览的时候就是没有效果！

然后在Stack Overflow上找到一个回答：
how-to-enable-mathjax-rendering-in-sublime-text-markdown-preview

这里边被采纳的@VividD的答案已经比较早了，现在没有那个选项了！然后在下边有个回答说，要在设置中添加：

{
    "enable_mathjax": true,
    "js": [
    "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
            "res://MarkdownPreview/js/math_config.js",
    ],
}

之后，还要去编辑math_config.js。我这里没有去编辑math_config.js，（找不到这个文件！！！），然后在这个回答的评论中说到，github.com/facelessuser/MarkdownPreview/issues/12，
这个issue，还需要添加：

"markdown_extensions": { 
	"pymdownx.arithmatex": { 
		"generic": true 
	} 
}

我在添加了这一设置之后发现添加的数学公式都能显示出来了！但是又发现了新的问题就是自动生成的目录[TOC]不显示了，而且代码格式全乱了！

然后猜测是不是这个设置的问题，就发现默认设置中有这一个markdown_extensions，而且是一大堆，所以我在想这里就设置了一个，就把默认的全部给覆盖掉了，所以我就把默认的全部复制过来：

{
	"enable_mathjax": true,
	"js": [
    "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js",
            "res://MarkdownPreview/js/math_config.js",
    ],
	"markdown_extensions": [
        // Python Markdown Extra with SuperFences.
        // You can't include "extra" and "superfences"
        // as "fenced_code" can not be included with "superfences",
        // so we include the pieces separately.
        "markdown.extensions.footnotes",
        "markdown.extensions.attr_list",
        "markdown.extensions.def_list",
        "markdown.extensions.tables",
        "markdown.extensions.abbr",
        "pymdownx.betterem",
        {
            "markdown.extensions.codehilite": {
                "guess_lang": false
            }
        },
        // Extra's Markdown parsing in raw HTML cannot be
        // included by itself, but "pymdownx" exposes it so we can.
        "pymdownx.extrarawhtml",

        // More default Python Markdown extensions
        {
            "markdown.extensions.toc":
            {
                "permalink": "\ue157"
            }
        },
        "markdown.extensions.meta",
        "markdown.extensions.sane_lists",
        "markdown.extensions.smarty",
        "markdown.extensions.wikilinks",
        "markdown.extensions.admonition",

        // PyMdown extensions that help give a GitHub-ish feel
        {
            "pymdownx.superfences": { // Nested fences and UML support
                "custom_fences": [
                    {
                        "name": "flow",
                        "class": "uml-flowchart",
                        "format": {"!!python/name": "pymdownx.superfences.fence_code_format"}
                    },
                    {
                        "name": "sequence",
                        "class": "uml-sequence-diagram",
                        "format": {"!!python/name": "pymdownx.superfences.fence_code_format"}
                    }
                ]
            }
        },
        {
            "pymdownx.magiclink": {   // Auto linkify URLs and email addresses
                "repo_url_shortener": true,
                "repo_url_shorthand": true
            }
        },
        "pymdownx.tasklist",     // Task lists
        {
            "pymdownx.tilde": {  // Provide ~~delete~~
                "subscript": false
            }
        },
        {
            "pymdownx.emoji": {  // Provide GitHub's emojis
                "emoji_index": {"!!python/name": "pymdownx.emoji.gemoji"},
                "emoji_generator": {"!!python/name": "pymdownx.emoji.to_png"},
                "alt": "short",
                "options": {
                    "attributes": {
                        "align": "absmiddle",
                        "height": "20px",
                        "width": "20px"
                    },
                    "image_path": "https://assets-cdn.github.com/images/icons/emoji/unicode/",
                    "non_standard_image_path": "https://assets-cdn.github.com/images/icons/emoji/"
                }
            }
        },
        {
        	"pymdownx.arithmatex": { 
        		"generic": true 
        	}
        }
    ],
}

然后，发现美滋滋，数学公式能够显示，目录也能自动生成，代码格式也不乱了！

给看个例子，比如：

**回归问题的典型性能衡量指标是均方根误差（RMSE）**

RMSE对应欧几里得范数，也称之为$\iota_{2}$范数，记作$\left \| . \right \|_{2}$，或者$\left \| . \right \|$

$$ RMSE(X,h) = \sqrt{\frac{1}{m}\sum_{i=1}^{m}(h(X^{(i)})-y^{(i)}})^{2} $$

但是如果有很多离群区域时，你可以考虑使用**平均绝对误差（平均绝对偏差）**

MAE对应$\iota_{1}$范数，记作$\left \| . \right \|_{1}$。有时它也被称为曼哈顿距离

$$ MAE(X,h) = \frac{1}{m}\sum_{i=1}^{m}\left | h(X^{(i)}) - y^{(i)} \right | $$

那么，上边对应的显示效果：

ok，很漂亮！

最后，收藏一个在线的LaTeX编辑器，可以看到展示效果，也给出一些常用的数学符号，非常方便！