Sublime 配置 Markdown環境

Sublime 配置 Markdown環境

Markdown作爲一種標記語言，其好處就不用我再囉嗦啦。那我們就直接進入正題好了O(∩_∩)O!

Sublime Text3 下 Markdown 實時預覽

這個教程到處都有了，推薦這個博客，感覺講的很詳細啦！大致總結一下：

1. 安裝package control ，sublime下的包安裝器；
2. 安裝MarkdownEditing插件，Sublime中Markdown的編輯插件；
3. MarkdownPreview ，提供在瀏覽器中的預覽功能，記得配置快捷鍵哦（在此提一下，還有一個類似的插件MarkdownLivePreview，不過實際預覽效果並不理想）；
4. 安裝LiveReload插件 ，實時自動刷新預覽，只要在sublime保存一次，網頁就會自動刷新預覽。順便補充一下，那篇博客裏提到的LiveReload配置方法，不是永久有效的，一旦重啓sublime，又要重新配置一遍比較麻煩。所以建議大家通過用戶自定義配置來永久開啓。方法如下：

   依次打開：Preferences > Package Settings > LiveReload > Settings User，在user的配置文件中加入如下設置：

   	{
   		"enabled_plugins": ["SimpleReloadPlugin","SimpleRefresh"]
   	}；
   

通過上面幾步，我們Sublime下Markdown的配置算基本完成了。但是隻是基本完成了哦！下面就要介紹一下隱藏的哪些坑了😌！

隱藏的坑

1. 左側空格

見Sublime3 Markdown 去除左側空白+更改主題。

2. 公式渲染有問題

markdown下插入數學公式有多種方式，詳見如何在markdown中完美插入數學公式。我採用的是藉助MathJax引擎，那麼問題就來了。每次都要在markdown文件首部添加如下代碼：

<script type="text/javascript" src="http://cdn.mathjax.org/mathjax/latest/MathJax.js?config=default"></script>

要不要這麼麻煩啊(ಥ _ ಥ)！加就加吧，誰叫你牛呢┑(￣Д ￣)┍！可這又是什麼鬼？

• 好好的二階導怎麼就變成一階導加單引號了呢，難道是引號打成中文啦😱，等我看看，明明兩個引號長一樣啊Ｏ(≧口≦)Ｏ。
• 內聯公式怎麼識別不出來了，這要我怎麼好好做科研嘛！
  不行，想想都好氣哦。弄了半天，難道真的要轉戰VSCode嗎~~~ 不，我就是這麼倔。不弄好，我就不科研了╭(╯^╰)╮！就這這麼傲嬌！

終於，在網上找到了類似的問題，在此附上鏈接，討論的很有深度，感興趣的小夥伴可以看看，我實在是看不下去😂。
具體解決方案在這裏，大致思路就是：

• 配置Markdown Preview User Settings，內容如下，由於這裏包含了mathjax.js的路徑，以後就不用在markdown文件首部添加了：

{
	"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
            }
        }
    ],
}

• 由於上面用到了math_config.js文件，需要在對應的 JS 目錄下新建該文件。
  但是，該文件到底應該放在哪呢？以mac系統爲例，
  • 首先，在Sublime工具欄Preferences > Browser Packages…打開Packages目錄，該目錄所在的路徑就是sublime中包的保存路徑。
  • 然後，由於上面配置文件中設置的 js 路徑是"res://MarkdownPreview/js/math_config.js"，該路徑是相對於sublime包的保存路徑而言的，因此我們需要在該目錄下新建路徑“MarkdownPreview/js/”，如下圖所示：
    
    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'
});

終於，mark一下這麼偉大的時刻(≧▽≦)/！當然，這只是我在使用sublime配置markdown時遇到的一些問題，以後說不定還會有其他問題，歡迎大家跟帖交流(^__) …