Sublime Text 2/3 Markdown Preview

SublimePlugin : Markdown Preview

標(biāo)簽(空格分隔): SublimePlugin Markdown

Sublime Text 2/3 Markdown Preview


Sublime Text 2/3 Markdown Preview

Preview and build your markdown files quickly in your web browser from sublime text 2/3.

You can use builtin python-markdown parser or use the github markdown API for the conversion.

NOTE: If you choose the GitHub API for conversion (set parser: github in your settings), your code will be sent through https to github for live conversion. You'll have Github flavored markdown, syntax highlighting and EMOJI support for free :heart: :octocat: :gift:. If you make more than 60 calls a day, be sure to set your GitHub API key in the settings :). You can also get most of this in the default Markdown parser with by enabling certain extensions; see "Parsing Github Flavored Markdown"" below for more information.

LINUX users: If you want to use GitHub API for conversion, you'll need to have a custom Python install that includes python-ssl as its not built in the Sublime Text 2 Linux package. see @dusteye comment. If you use a custom window manager, also be sure to set a BROWSER environment variable. see @PPvG comments

Features :

  • Markdown preview using the Python-markdown or the Github API just choose select the build commands.

  • Syntax highlighting via Pygments. See "Configuring Pygments" for more info.

  • Build markdown file using Sublime Text build system. The build parser are config via the "parser" config.

  • Browser preview auto reload on save if you have the ST2 LiveReload plugin installed.

  • Builtin parser : supports abbr, attr_list, def_list, fenced_code, footnotes, tables, smart_strong, smarty, wikilinks, meta, sane_lists, codehilite, nl2br, and toc markdown extensions.

  • CSS search path for local and build-in CSS files (always enabled) and/or CSS overriding if you need

  • YAML support thanks to @tommi

  • Clipboard selection and copy to clipboard thanks to @hexatrope

  • MathJax support : \\(\frac{\pi}{2}\\) thanks to @bps10. You have to set enable_mathjax to true in your settings. MathJax is then downloaded in the background so you need to have an internet access.

  • HTML template customisation thanks to @hozaka

  • Embed images as base64 (see settings file for more info)

  • Strip out multimarkdown critic marks from either Githubs or Python Markdown input source (see settings file for more info)

  • 3rd party extensions for the Python Markdown parser:

    Extension Documentation
    magiclink Find and convert HTML links and email address to links (MagicLink Documentation).
    delete Surround inline text with ~~strike through~~ to get del tags strike through.
    insert Surround inline text with ^^underlined^^ to get ins tags <ins>underlined</ins>.
    tasklist Github Flavored Markdown tasklists (Tasklist Documentation).
    githubemoji Support for Github Flavored Markdown emojis (GithubEmoji Documentation).
    headeranchor Github Flavored Markdown style header anchors (HeaderAnchor Documentation).
    github A convenience extension to add: magiclink, delete, tasklist, githubemoji, headeranchor, superfences, and nl2br to parse and display Markdown in a github-ish way. It is recommed to pair github with extra and codehilite (with language guessing off) to parse close to github's way. Be aware of what extensions github loads, because you should not load extensions more than once.
    progressbar Create progress bars (ProgressBar Documentation).
    superfences Allow fenced blocks to be nested under lists, blockquotes, etc. and add special UML diagram blocks (SuperFences Documentation).

Installation :

Using Package Control (Recommended)

For all Sublime Text 2/3 users we recommend install via Package Control.

  1. Install Package Control if you haven't yet.
  2. Use <kbd>cmd</kbd>+<kbd>shift</kbd>+<kbd>P</kbd> then Package Control: Install Package
  3. Look for Markdown Preview and install it.

Manual Install

  1. Click the Preferences > Browse Packages… menu
  2. Browse up a folder and then into the Installed Packages/ folder
  3. Download zip package rename it to Markdown Preview.sublime-package and copy it into the Installed Packages/ directory
  4. Restart Sublime Text

Usage :

To preview :

  • optionally select some of your markdown for conversion
  • use <kbd>cmd</kbd>+<kbd>shift</kbd>+<kbd>P</kbd> then Markdown Preview to show the follow commands (you will be prompted to select which parser you prefer):
    • Markdown Preview: Preview in Browser
    • Markdown Preview: Export HTML in Sublime Text
    • Markdown Preview: Copy to Clipboard
    • Markdown Preview: Open Markdown Cheat sheet
  • or bind some key in your user key binding, using a line like this one:
    { "keys": ["alt+m"], "command": "markdown_preview", "args": {"target": "browser", "parser":"markdown"} }, for a specific parser and target or { "keys": ["alt+m"], "command": "markdown_preview_select", "args": {"target": "browser"} }, to bring up the quick panel to select enabled parsers for a given target.
  • once converted a first time, the output HTML will be updated on each file save (with LiveReload plugin)

Enabling Other External Markdown Parsers :

External parser commands and arguments should first be mapped to a name. The path to the binary should be first, followed by flags etc.

    "markdown_binary_map": {
        "multimarkdown": ["/usr/local/bin/multimarkdown"]
    },

Then the name can be placed in enabled_parsers to enable use of the new parser.

    "enabled_parsers": ["markdown", "github", "multimarkdown"],

To build :

  • Just use <kbd>ctrl</kbd>+<kbd>B</kbd> (Windows/Linux) or <kbd>cmd</kbd>+<kbd>B</kbd> (Mac) to build current file.

To config :

Using Sublime Text menu: Preferences->Package Settings->Markdown Preview

  • Settings - User is where you change your settings for Markdown Preview.
  • Settings - Default is a good reference with detailed descriptions for each setting.

Configuring Pygments

If you add the codehilite extension manually in the enabled extensions, you can override some of the default settings.

  • Turn language guessing on or off (on will highlight fenced blocks even if you don't specify a language) codehilite(guess_lang=False) (True|False).
  • Show line numbers: codehilite(linenums=True) (True|False).
  • Change the higlight theme: codehilite(pygments_style=emacs).
  • Inline the CSS: codehilite(noclasses=True) (True|False).
  • Use multiple: codehilite(linenums=True, pygments_style-emacs).

See codehilte page for more info.

Meta Data Support

When the meta extension is enabled (https://pythonhosted.org/Markdown/extensions/meta_data.html), the results will be written to the HTML head in the form <meta name="key" content="value1,value2">. title is the one exception, and its content will be written to the title tag in the HTML head.

YAML Frontmatter Support

YAML frontmatter can be stripped out and read when strip_yaml_front_matter is set to true in the settings file. In general the, the fronmatter is handled the same as meta data, but if both exist in a file, the YAML keys will override the meta extension keys. There are a few special keys names that won't be handled as html meta data.

Special YAML Key Names

Yaml frontmatter has a few special key names that are used that will not be handled as meta data:

  • basepath: An absolute path to configure the relative paths for images etc. (for when the markdown is supposed to reference images in a different location.)
  • references: Can take a file path or an array of file paths for separate markdown files containing references, footnotes, etc. Can be an absolute path or relative path. Relative paths first use the source file's directory, and if the file cannot be found, it will use the basepath setting.
  • destination: This is an absolute file path or relative file path for when the markdown is saved to html via the build command or the Save to HTML command. Relative paths first use the source file's directory, and if the file cannot be found, it will use the basepath setting.
  • settings: This is a dictionary where you can override settings that are in the settings file.

Example

---
    # Builtin values
    references:
        - references.md
        - abbreviations.md
        - footnotes.md

    destination: destination.html

    # Meta Data
    title: Test Page
    author:
        - John Doe
        - Jane Doe

    # Settings overrides
    settings:
        enabled_extensions:
        - extra
        - github
        - toc
        - headerid
        - smarty(smart_quotes=False) # smart quotes interferes with attr_list
        - meta
        - wikilinks
        - admonition
        - codehilite(guess_lang=False,pygments_style=github)
---

Parsing Github Flavored Markdown :

Github Flavored Mardown (GFM) is a very popular markdown. Markdown Preview can actually handle them in a couple of ways: online and offline.

Online :

Parsing GFM using the online method requires using the Github API as the parser. It may also require setting github_mode to gfm to get things like tasklists to render properly. You can set your API key in the settings as follows:

    "github_oauth_token": "secret"

Offline :

By default almost all extensions are enabled to help with the github feel, but there are some tweaks needed to get the full experience.

GFM does not auto guess language in fenced blocks, but Markdown Preview does this by default. You can fix this in one of two ways:

  1. Disable auto language guessing in the settings file "guess_language": false,
  2. Or if you are manually defining extensions: "enabled_extensions": ["codehilite(guess_lang=False,pygments_style=github)"]

As mentioned earlier, almost all extensions are enabled by default, but as a reference, the minimum extensions that should be enabled are listed below:

    "enabled_extensions": [
        "extra",
        "github",
        "codehilite(guess_lang=False,pygments_style=github)"
    ]

This may be further enhanced in the future.

Support :

  • Any bugs about Markdown Preview please feel free to report here.
  • And you are welcome to fork and submit pull requests.

License :

The code is available at github project under MIT license.

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末佳吞,一起剝皮案震驚了整個(gè)濱河市昌罩,隨后出現(xiàn)的幾起案子从祝,更是在濱河造成了極大的恐慌什往,老刑警劉巖舔示,帶你破解...
    沈念sama閱讀 221,635評(píng)論 6 515
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異县耽,居然都是意外死亡吓揪,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 94,543評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門若皱,熙熙樓的掌柜王于貴愁眉苦臉地迎上來镊叁,“玉大人,你說我怎么就攤上這事走触』奁” “怎么了?”我有些...
    開封第一講書人閱讀 168,083評(píng)論 0 360
  • 文/不壞的土叔 我叫張陵互广,是天一觀的道長敛腌。 經(jīng)常有香客問我,道長惫皱,這世上最難降的妖魔是什么像樊? 我笑而不...
    開封第一講書人閱讀 59,640評(píng)論 1 296
  • 正文 為了忘掉前任,我火速辦了婚禮旅敷,結(jié)果婚禮上生棍,老公的妹妹穿的比我還像新娘。我一直安慰自己媳谁,他們只是感情好涂滴,可當(dāng)我...
    茶點(diǎn)故事閱讀 68,640評(píng)論 6 397
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著晴音,像睡著了一般柔纵。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上锤躁,一...
    開封第一講書人閱讀 52,262評(píng)論 1 308
  • 那天搁料,我揣著相機(jī)與錄音,去河邊找鬼。 笑死加缘,一個(gè)胖子當(dāng)著我的面吹牛鸭叙,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播拣宏,決...
    沈念sama閱讀 40,833評(píng)論 3 421
  • 文/蒼蘭香墨 我猛地睜開眼沈贝,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了勋乾?” 一聲冷哼從身側(cè)響起宋下,我...
    開封第一講書人閱讀 39,736評(píng)論 0 276
  • 序言:老撾萬榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎辑莫,沒想到半個(gè)月后学歧,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,280評(píng)論 1 319
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡各吨,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,369評(píng)論 3 340
  • 正文 我和宋清朗相戀三年枝笨,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片揭蜒。...
    茶點(diǎn)故事閱讀 40,503評(píng)論 1 352
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡横浑,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出屉更,到底是詐尸還是另有隱情徙融,我是刑警寧澤,帶...
    沈念sama閱讀 36,185評(píng)論 5 350
  • 正文 年R本政府宣布瑰谜,位于F島的核電站欺冀,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏萨脑。R本人自食惡果不足惜隐轩,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,870評(píng)論 3 333
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望砚哗。 院中可真熱鬧龙助,春花似錦、人聲如沸蛛芥。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,340評(píng)論 0 24
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽仅淑。三九已至称勋,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間涯竟,已是汗流浹背赡鲜。 一陣腳步聲響...
    開封第一講書人閱讀 33,460評(píng)論 1 272
  • 我被黑心中介騙來泰國打工空厌, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人银酬。 一個(gè)月前我還...
    沈念sama閱讀 48,909評(píng)論 3 376
  • 正文 我出身青樓嘲更,卻偏偏與公主長得像,于是被迫代替她去往敵國和親揩瞪。 傳聞我的和親對(duì)象是個(gè)殘疾皇子赋朦,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,512評(píng)論 2 359

推薦閱讀更多精彩內(nèi)容