Sublime | 編輯工具Sublime的使用小結

Sublime Package & Usage

MarkdownEditing

• github 開源地址：https://github.com/SublimeText-Markdown/MarkdownEditing

• MarkdownEditing 是 Markdown 寫作者必備的插件，它可以不僅可以高亮顯示 Markdown 語法，還支持很多編程語言的語法高亮顯示。

• 除了高亮顯示語法，MarkdownEditing 還提供了一些快捷鍵用於快速插入markdown 標記

  • 插入鏈接：Ctrl + Win + K
  • 插入圖片：Shift + Win + K

  下面這種方法也可以實現同樣的效果

  • 輸入 mdi ，按Alt 鍵，會自動插入下面的圖片標記

    ![Alt text](/path/to/img.jpg "Optional title")

  • 輸入 mdl ，按Alt 鍵，會自動生成下面的鏈接標記

    [](link)

MarkdownPreview

• github 開源地址：https://github.com/facelessuser/MarkdownPreview
• Mardown Preview不僅支持在瀏覽器中預覽markdown文件，還可以導出html代碼。

Usage

• Ctrl+Shift+P，如輸入mdp ，下圖中紅框圈出的就是 在瀏覽器中預覽 markdown 文件
  
• 也可以通過下面的 快捷鍵綁定 來實現

Key Bindings

markdown preview默認沒有快捷鍵，我們可以自己爲preview in browser設置快捷鍵。方法是在Preferences -> Key Bindings User 中添加以下代碼 (可在Key Bindings Default找到格式)

• "f6" 可設置爲自己喜歡的按鍵；
• "parser":"markdown" 也可設置爲 "parser":"github" ，改爲使用Github在線API解析

[
	{ "keys": ["f6"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} },
]

Setting （語法高亮和mathjax支持）

• 語法高亮跟編輯器的主題有關，可以在Preferences ->Color Scheme找自己喜歡的主題
• 關於目錄生成，只要文章是按照 markdown 語法寫作的。在需要生成目錄的地方寫 [TOC] 即可
• 設置mathjax支持需要在 Preferences ->Package Settings->Markdown Preview->Setting User 中增加如下代碼

{
    /*
        Enable or not mathjax support.
    */
    "enable_mathjax": true,
    /*
        Enable or not highlight.js support for syntax highlighting.
    */
    "enable_highlight": true,
}

OmniMarkupPreviewer

• github 開源地址：https://github.com/timonwong/OmniMarkupPreviewer
• OmniMarkupPreviewer 用來預覽 markdown 編輯的效果，同樣支持渲染代碼高亮的樣式。

GitHub Markdown Snippets

使用 jekyll 或 hexo 寫博客的時候，開篇一般都需要去寫一個頭部，內容如下：

---
title: XXXXXXXXXXXXXXXXXXXXXXXXXXXX
categories:
  - XXXX
tags:
  - XXXX
abbrlink: XXXXXXX
date: 2018-0x-1x 1x:1x:5x
---

對於這個固定格式我們可以定義一個Snippets，詳細參考官方文檔 Snippets，具體的步驟如下：

• Tools–>Developer–>New Snippets..

初始文件內容：

 <snippet>
    <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <!-- <tabTrigger>hello</tabTrigger> -->
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <!-- <scope>source.python</scope> -->
</snippet>

• content
  • Hello, ${1:this} is a ${2:snippet}. 要的顯示的文本
• tabTrigger
  • <tabTrigger>hello</tabTrigger> 要觸發的版本
• scope
  • <scope>source.python</scope> 在那個類型文件觸發

下面是我根據我自己的需要來創建的 snippets，在markdown和html模式下，輸入blog，按 TAB 鍵就直接顯示上面的內容

<snippet>
    <content><![CDATA[
---
title: ${1}
categories:
  - ${2}
tags:
  - ${3}
abbrlink: 2018${4}
date: 2018-${5}
---
${6}    
]]></content>
    <!-- Optional: Set a tabTrigger to define how to trigger the snippet -->
    <tabTrigger>blog</tabTrigger>
    <!-- Optional: Set a scope to limit where the snippet will trigger -->
    <scope>text.html.markdown,text.html</scope>
</snippet>

注意：創建完成後，一定要保存成 .sublime-snippet 格式

Markdown TOC

• github 開源地址：https://github.com/naokazuterada/MarkdownTOC#features
• 安裝好插件以後，可以設置生成目錄的時候帶不帶錨點

Usage

• 生成目錄樹
  tool -> MarkdownTOC -> insert/update TOC

Configuration

"autoanchor": true, #錨點
"autolink": true,   #自動關聯
"uri_encoding": false,  #錨點編碼（開啓的時候，會把非英文錨點標記進行uri encode編碼，此時只有google瀏覽器支持自動解碼，ie,360都不支持，因此建議把這裏設置成false，經測試google和ie、360均可，但是錨點是中文的，不知後續是否有影響）
"style": ordered, #生成的目錄帶序號，這個很棒，但是確定是不能自定義格式，默認是羅馬數字

Markdown Numbered Headers

• github 開源地址：https://github.com/weituotian/md_numbered_headers
• 用於自動 插入/更新/刪除 標題編號 的 Sublime 插件
• 靈感來自 MarkdownTOC，與 MarkdownTOC 兼容。
  

Usage

1. Install the plugin
2. Open your Markdown file
3. Place the cursor at the position where you want to start to numbers headers
4. Pick from menu: Tools > Markdown Numbered Headers > Insert / Update
5. And the heders in the Markdown document was numbered
6. Save the document and you are done
7. Now you can go on and edit your document further

Configuration

• Sublime Text > Preferences > Package Settings > Markdown Numbered Headers > Settings - User

{
  "h1": 0,
  "h2": 0,
  "h3": 0,
  "h4": 0,
  "h5": 0,
  "h6": 0,
  "depth":6,
  "dottype":"-", //數字之間的連接符號：2-2-3
  "logging": true,
  "last_number_dot":"." //最後一個標點2-2-3.
}

Name	Values	default	means
h1,h2,h3,h4,h5,h6	integer	0	the start counting num in each num
depth	integer	6	define which header level start with
dottype	string	-	use to Separate header nums,like 1-2-3
logging	boolean	true	show the runtime log
last_number_dot	string	.	the last dot type, like 1-2-3. or 1-2-3-

Table Editor

• github開源地址：https://github.com/vkocubinsky/SublimeTableEditor
• 好用的 Markdown 表格編輯插件
• 自動對齊，強迫症患者必備
  

Activate

• ctrl +　shift + p
• 輸入 Table Editor
• 選擇 Enable for current syntax 或 Enable for current view 或 Set table syntax ... for current view（激活）

Usage

input

| Name | Phone |
|-

click Tab ，then…

| Name | Phone |
|------|-------|
| _    |       |

Reference

Table Editor 使用方法
好用的Markdown表格編輯插件Table Editor

Markdown Extended + Monokai Extended

• Markdown Extended github 開源地址：https://github.com/jonschlinkert/sublime-markdown-extended
• Monokai Extended github 開源地址：https://github.com/jonschlinkert/sublime-monokai-extended
• Markdown Extended - Packages
• Monokai Extended - Packages
• 不錯的Markdown主題，支持對多種語言的高亮

語言切換

安裝此包後，打開 .md 文件，並將語言切換爲 Markdown Extended

• 在編輯器右下角的狀態欄中從支持語言列表中選擇
• ctrl +　shift + p 搜索 Markdown Extended

設爲默認

• View -> Syntax -> Open all with current extension as... -> Markdown Extended
• set theme：Preferences -> Color Scheme -> Monokai Extended ... 選擇一個主題

開啓自動換行

• 臨時辦法

  • View->Word Wrap（勾選是自動換行)，只對一窗口文件起作用
  • word wrap column ，可以設置爲 一行多少個字符才換行

• 永久辦法

  • Preferences -> Setting - User，添加如下內容即可：

{
"word_wrap" : true
}