sublime-text3打造markdown編輯器

編輯插件

sublime自帶的markdown語法高亮并不是很友好,推薦安裝Markdown Editing,github主頁然后在視圖->語法里選擇MarkdownEditing啟用,支持三種風(fēng)格,分別是Standard Markdown, GitHub flavored Markdown, MultiMarkdown.
在首選項(xiàng)->Package Setting->Markdown Editing里可以切換theme和修改主題的配置文件.選擇你正在啟用的主題,將default里的內(nèi)容復(fù)制到user里就可以修改了.這里只介紹幾個(gè)推薦的配置

"color_scheme": "Packages/Boxy Theme/schemes/Boxy Monokai.tmTheme", // 修改風(fēng)格的主題,我這里是sublime的boxy主題自帶的,默認(rèn)有這幾種主題
    // "color_scheme": "Packages/MarkdownEditing/MarkdownEditor.tmTheme",
    // "color_scheme": "Packages/MarkdownEditing/MarkdownEditor-Dark.tmTheme",
    // "color_scheme": "Packages/MarkdownEditing/MarkdownEditor-Yellow.tmTheme",
"highlight_line": true, // 高亮正在編輯的行
"line_numbers": true,   // 顯示行號
"tab_size": 4,          // tab寬度
"translate_tabs_to_spaces": true,   // tab轉(zhuǎn)換為空格
"trim_trailing_white_space_on_save": true,  // 保存時(shí)去掉行尾空格
"word_wrap": true,      // 自動換行
"wrap_width": "auto",    // 換行的寬度,默認(rèn)80會造成左側(cè)大量留白
"mde.keep_centered": true,  // 可以保持你正在編輯的行始終處于屏幕的中間

Markdown Editing并不只是一個(gè)markdown的主題插件,它自定義許多markdown的快捷鍵,例如ctrl+2是二級標(biāo)題,還有許多可以看配置文件和項(xiàng)目的github主頁

預(yù)覽插件

可以選擇Markdown Preview或MarkdownLivePreview.

MarkdownLivePreview

MarkdownLivePreview可以實(shí)現(xiàn)實(shí)時(shí)預(yù)覽,在首選項(xiàng)->Package Setting里修改MarkdownLivePreview的user配置文件,設(shè)置在打開時(shí)同步預(yù)覽

"markdown_live_preview_on_open": true

效果如圖:

但是,這個(gè)插件的預(yù)覽效果并不理想,很丑,而且不能橫向滾動,也就是說如果一行顯示不過來那你就看不到了.而且裝上它后雖然可以實(shí)時(shí)預(yù)覽,但不知道因?yàn)槭裁丛蜉斎氲臅r(shí)候會有些卡,推薦的是下面這個(gè)插件.

Markdown Preview

這個(gè)插件不能實(shí)時(shí)預(yù)覽,但你可以設(shè)置快捷鍵讓它在瀏覽器中預(yù)覽,在首選項(xiàng)->快捷鍵設(shè)置里添加

    { "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} },

在編輯markdown文件時(shí)可以通過按alt+m快速在瀏覽器中預(yù)覽,雖然不如實(shí)時(shí)預(yù)覽方便,但markdown的格式很簡單,經(jīng)常用的人并不需要頻繁的預(yù)覽,設(shè)計(jì)markdown的初衷本就是為了讓編輯安心碼字,不用過多考慮格式的問題.效果如圖

如果你真的很想要實(shí)時(shí)預(yù)覽可以嘗試下面的插件

OmniMarkupPreviewer

可以實(shí)現(xiàn)在瀏覽器中實(shí)時(shí)預(yù)覽,如果你有雙顯示屏或嫌每次都要按alt+m重新生成html麻煩可以嘗試這個(gè)插件,安裝后在首選項(xiàng)->Package Setting里修改OmniMarkupPreviewer的setting-user添加

{
    "renderer_options-MarkdownRenderer": {
        "extensions": ["tables", "fenced_code", "codehilite"]
    }
}

在要預(yù)覽的文件里右鍵->Preview markup in browser 或者按快捷鍵ctrl+alt+o就可以在瀏覽器里預(yù)覽了.感覺html的樣式不如Markdown Preview好看,但是勝在可以實(shí)時(shí)預(yù)覽,比較方便.另外可以修改擴(kuò)展的配置文件,將預(yù)覽地址改為局域網(wǎng)下的地址,這樣如果你有Pad之類的話,就可以用pad訪問預(yù)覽地址,用電腦編寫

{
    "renderer_options-MarkdownRenderer": {
        "extensions": ["tables", "fenced_code", "codehilite"]
    },
    "server_host": "192.168.2.137"
}

預(yù)覽效果