Stories

Detail Return Return

SublimeText配置Markdown編輯及預覽 - Stories Detail

概述

本文詳細介紹瞭如何配置Sublime Text及相關插件,使之成為Markdown編輯器並且能夠在瀏覽器中實現預覽功能。

所需工具

  • Sublime Text + Package Control
  • 插件:Markdown Editing
  • 插件:Markdown Preview
  • 插件:LiveReload
  • 瀏覽器

具體步驟

1、 安裝Sublime Text以及Package Control

Package Control是非常有用的插件包管理工具,有了它可以方便地下載安裝其他插件。

2、 安裝三個插件

ctrl + shift + P`調出控制枱,選擇`Package Control: Install Packge

分別搜索並安裝三個插件:MarkdownEditing,MarkdownPreview,LiveReload。

Install_package.png

3、 配置三個插件

  • MarkdownEditing:

打開Preferences -> Package Settings -> Markdown Editing -> Key Bindings

img

添加以下內容:(設置預覽快捷鍵為alt + m

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

img

  • MarkdownPreview:

打開Preferences -> Package Settings -> Markdown Preview -> Settings

img

添加以下內容:

   "enable_autoreload": true,

img

  • 啓動LiveReload

ctrl + shift + P,輸入LiveReload: Enable/disable plug-ins,選擇Enable: Simple Reload

img
img

配置完成!

4、 測試:

編寫markdown文章,ctrl + S保存,按alt + M呼出瀏覽器可以看到預覽。之後每次修改完畢按保存,預覽窗口會自動刷新。

編輯器界面:

img

瀏覽器界面:

img

Add a new Comments

Some HTML is okay.