1. 程式人生 > >如何優雅地使用Markdown (Sublime 3 + MarkdownEditing+OmniMarkupPreviewer)

如何優雅地使用Markdown (Sublime 3 + MarkdownEditing+OmniMarkupPreviewer)

使用 導出 mman 支持 blog .com tar 技術分享 pla

最近開始上手Sublime 3

作為Markdown 的重度使用者自然關於Markdown的插件是必不可少的 。
在這裏記錄分享一下我常用的兩款Markdown插件。

  • MarkdownEditing

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

  • OmniMarkupPreviewer

OmniMarkupPreviewer用來預覽markdown 編輯的效果,同樣支持渲染代碼高亮的樣式。

一、MarkdownEditing

1.安裝:
https://github.com/SublimeText-Markdown/MarkdownEditing

建議:通過Package Control 安裝

The preferred method of installation is via Sublime Package Control.

Install Sublime Package Control
From inside Sublime Text, open Package Control‘s Command Pallet: CTRL SHIFT P (Windows, Linux) or CMD SHIFT P on Mac.
Type install package and hit Return. A list of available packages will be displayed.
Type MarkdownEditing and hit Return. The package will be downloaded to the appropriate directory.
Restart Sublime Text to complete installation. Open a Markdown file and this custom theme. The features listed below should now be available.

2.修改配置文件

在Preference——>Package Settings ->Markdown Editing->Markdown Setting: User中修改

{
    "extensions":
    [
        "md"
    ],

   "color_scheme": "Packages/MarkdownEditing/MarkdownEditor-ArcDark.tmTheme",

    "line_padding_top": 4,
    "line_padding_bottom": 4,

    "tab_size": 4,
    "translate_tabs_to_spaces": true,

    "draw_centered": false,
    "word_wrap": true,
    "wrap_width": 100,// 每行字符數上限 
    "rulers": []
}

3.修改配色

在Preference——>Package Settings ->Markdown Editing->change color Scheme中修改

二、安裝OmniMarkupPreviewer

完成了基本的編輯需要,接下來查看Markdown的渲染效果或者輸出html格式,OmniMarkupPreviewer就會派上用場了,我們同樣需要借助Pacakge Control來安裝這個插件。鍵入 "command + shift + p" 進入sublime的命令界面,輸入 "package ins" 然後回車 ,鍵入 "ominmarkup" 選擇OmniMarkupPreviewer , 回車。

插件安裝成功後我們就可以使用快捷鍵對編輯的markdown源文件進行預覽了。下面是幾個常用快捷鍵.

Command +Option +O: 在瀏覽器中預覽
Command+Option+X: 導出HTML

技術分享圖片

p.s. 安裝markdown過程中報錯

Sublime Text3 安裝 markdownediting插件 報錯 Error loading syntax file "Packages/Markdown/Markdown.tmLanguage"

解決方法詳見鏈接

安裝Markdownediting插件報錯解決方法

效果圖

技術分享圖片

如何優雅地使用Markdown (Sublime 3 + MarkdownEditing+OmniMarkupPreviewer)