【无标题】

一、安装 Package Control 组件
Package Control 是 Sublime Text 插件包管理器。sublime Text 只有安装了 Package control 组件，后期才能安装各种不同的插件。

Package Control 安装方法：按『Ctrl+Shift+P』组合键，调出如下界面，搜索『install package control』点击安装。

后续插件安装方法：按下『Ctrl+Shift+P』，输入『install』，选择『Package Control: Install Package』，在输入想要安装的插件名进行搜索即可。下文就不赘述了。

二、通用的插件
1. AutoFileName
主要功能：在代码中快速录入文件路径，当要输入文件路径时，会进行提示。
无需配置，下载安装好即可。
2. Bracket Highlighter
主要功能：代码匹配，可匹配 []、()、{}、“”、”、 等等，并高亮标记，便于查看起始和结束标记。
配置方法：下载安装好后，点击『preferences - Package settings - BracketHighlighter - Bracket setting』，在右边输入如下代码：
{
    // 这个是在成对的括号左侧显示一条竖线，表明开闭括号的范围与位置，如果不需要把true改为false
    "content_highlight_bar": false,
    // 下面不同括号的显示方式，默认是下划线，这里改成了高亮
    "bracket_styles": {
        "default": {
            "icon": "dot",
            "color": "region.yellowish brackethighlighter.default",
            "style": "highlight"
        },
        "unmatched": {
            "icon": "question",
            "color": "region.redish",
            "style": "outline"
        },
        "curly": {
            "icon": "curly_bracket",
            "color": "region.purplish"
            // "style": "underline"
        },
        "round": {
            "icon": "round_bracket",
            "color": "region.yellowish"
            // "style": "underline"
        },
        "square": {
            "icon": "square_bracket",
            "color": "region.bluish"
            // "style": "underline"
        },
        "angle": {
            "icon": "angle_bracket",
            "color": "region.orangish"
            // "style": "underline"
        },
        "tag": {
            "icon": "tag",
            "color": "region.orangish"
            // "style": "underline"
        },
        "c_define": {
            "icon": "hash",
            "color": "region.yellowish"
            // "style": "underline"
        },
        "single_quote": {
            "icon": "single_quote",
            "color": "region.greenish"
            // "style": "underline"
        },
        "double_quote": {
            "icon": "double_quote",
            "color": "region.greenish"
            // "style": "underline"
        },
        "regex": {
            "icon": "star",
            "color": "region.greenish"
            // "style": "underline"
        }
    },
    // 忽视限制因素，但是当代码较多的时候可能会影响性能
    "ignore_threshold": true,
}

3. Doc​Blockr
主要功能：生成优美注释（可自行设置），包括函数名、参数、返回值等，并以多行显示，手动写比较麻烦。
配置方法：下载安装好后，点击『preferences - Package settings - Doc​Blockr - setting - user』，输入一下内容：（这里按需求可以自行设置）
{
    "jsdocs_extra_tags":
    [
        "@fuction ${1:[description]}",
        "@Author PanyCG",
        "@DateTime {{datetime}}",
    ],
    "jsdocs_function_description": false
}

三、Web 前端开发的插件
1. Emmet
主要功能：Web 前端开发的神器。它利用了类 CSS 代码的编写方式能够快速地生成对应的 HTML 代码，进一步提升编写 HTML 的效率。
无需配置，安装好直接使用。
几种基本的使用技巧：
! + Tab，可快速生成 HTML 文档常用结构代码（默认），当然也可以修改这个模板。




    
    
    


    

标签名 + Tab ，自动补全标签，包括尖括号与结尾的结束标签。

> + Tab，表示输入为标签子代。

+号 + Tab ，表示输入为标签同级。

^号 + Tab ，表示输入到标签上级。

*number + Tab ，表示输入多个标签。

添加标签属性
.类名 + Tab
#id名 + Tab
[普通属性] + Tab
{元素内容} + tab

占位符$ + Tab，$ 的数量代表序列号的位数

2. View in Browser
主要功能：可以直接在浏览器上运行 HTML 文件。
配置方法：『preferences - Key Bindings』
修改快捷键为『F3』
修改默认浏览器为『Google 浏览器』
[
    // F3 - open_in_browser
    {
        "keys": ["f3"],
        "command": "open_in_browser"
    },

    // 设置默认浏览器为 Google
    {
        "keys": ["f2"],
        "command": "side_bar_files_open_with",
        "args": {
            "paths": [],
            "application": "C:\\Program Files (x86)\\Google\\Chrome\\Application\\chrome.exe",
            "extensions": ".*"
        }
    }
]

四、Markdown 插件
1. MarkdownEditing
主要功能：Markdown 写作者必备的插件，不仅可以高亮显示 Markdown 语法还支持很多编程语言的语法高亮显示。
颜色方案仿 Byword 及 iA writer
自动匹配星号（*）、下划线（_）及反引号（`）
选中文本按下以上符号能自动在所选文本前后添加配对的符号
方便粗体、斜体和代码框的输入
安装好即可以使用。
2. MarkdownPreview + LiveReload （浏览器实时预览）
主要功能：支持在浏览器中预览 markdown 文件，同时可以将 md 文件导出为 html 代码。
配置方法：
配置『MarkdownPreview』：使用 『F1』快捷键打开浏览器预览。点击『preferences - Key Bindings』，加入以下代码；
{
    "keys": ["f1"],
    "command": "markdown_preview",
    "args": {
        "target": "browser",
        "parser": "markdown"
    }
}

然后打开『Preferences - Package Settings - Markdown Preview - Settings』，加入以下代码：
{
    "enable_autoreload": true
}

配置『LiveReload』：使得不用重开浏览器，保存文件后，浏览器自动刷新。点击『Ctrl + Shift + P』，输入『LiveReload: Enable/disable plug-ins』，选择 『Simple Reload with delay (400ms)』或者『Simple Reload』，两者的区别仅仅在于后者没有延迟。然后，为了使配置永久生效，点击『Preferences - Package Settings - LiveReload - Settings User』，在配置文件中加入如下设置：
{
    "enabled_plugins": ["SimpleReloadPlugin","SimpleRefresh"]
}
  
解决公式渲染的问题
参考 如何在markdown中完美插入数学公式 ，借助『MathJax引擎』来实现。但是每次都需要在 markdown 文件首部添加一行代码，太麻烦了，且存在一定的问题。


解决方法：先配置『Markdown Preview - Settings』，内容如下：
{
    "enable_autoreload": true,

    "js": [
        "https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/MathJax.js",
        "res://MarkdownPreview/js/math_config.js"
    ],

    /*
        Markdown extension configuration.

        To specify a function in this JSON configuration, create an object with the key "!!python/name"
        and set it to the import path to the function "module.submodule.etc.function".
    */
    "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.smart_strong",
        "markdown.extensions.footnotes",
        "markdown.extensions.attr_list",
        "markdown.extensions.def_list",
        "markdown.extensions.tables",
        "markdown.extensions.abbr",
        {
            "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
        {
            "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,
                "smart_dollar": false
            }
        }
    ],
}

由于上面配置文件中设置的 js 路径是『res://MarkdownPreview/js/math_config.js』，该路径是相对于 sublime 包的保存路径而言的，因此我们需要在该目录下新建文件『math_config.js』，内容如下：
MathJax.Hub.Config(
    {
          config: ["MMLorHTML.js"],
          extensions: ["tex2jax.js"],
          jax: ["input/TeX", "output/HTML-CSS", "output/NativeMML"],
          tex2jax: {
            inlineMath: [ ['$','$'], ["\\(","\\)"] ],
            displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
            processEscapes: true
          },
          TeX: {
            extensions: ["AMSmath.js", "AMSsymbols.js"],
            TagSide: "right",
            TagIndent: ".8em",
            MultLineWidth: "85%",
            equationNumbers: 
            {
                  autoNumber: "AMS",
            },
            unicode: {
                  fonts: "STIXGeneral,'Arial Unicode MS'"
            }
        },
          displayAlign: "center",
          showProcessingMessages: false,
          messageStyle: 'none'
    }
);