sublime Text搭建markdown环境及预览配置

sublime Text搭建markdown环境及预览配置

1 准备工作

本文记录笔者在window10电脑上,sublime text4软件中搭建markdown的经历。开始之前,笔者假定你的sublime text软件已经安装了package control插件(没有安装可以查下这个链接Sublime Text 3 安装Package Control插件.),如下图,package control插件安装成功
sublime Text搭建markdown环境及预览配置

2 动手搭建环境

1. MarkdownEditing的安装和配置

1.1 安装markdownEditing

markdownEditing是markdown编辑器,支持语法高亮,操作步骤:ctrl+shift+p快捷键打开命令面板,输入picp,选择第一项 Package Controller:Install Package,然后会打开插件安装面板
sublime Text搭建markdown环境及预览配置
在插件安装面板搜索框中输入MarkdownEditing,选择该插件之后,sublime text界面底部会出现正在安装插件进度,几秒钟就会安装完成
sublime Text搭建markdown环境及预览配置
可能会弹出错误Error loading syntax file "Packages/Markdown/Markdown.tmLanguage":,这个可以看官网关于这个插件的介绍,是覆盖了sublime text自带的markdown编辑器冲突导致的。解决方法:找到sublime text安装目录,进入 Data/Local文件夹下面,将圈中的两个文件删除,关闭重启sublime text就ok了。详细可以参考官网给出的说明link
sublime Text搭建markdown环境及预览配置

1.2 简单配置markdownEditing

重启sublime text之后,可以在以下菜单中配置markdown编辑器,可以看到markdown的settings有三种

  • GFM GitHub的markdown语法,其在标准的markdown语法基础上做了扩充,称之为GitHub Flavored Markdown。简称GFM
  • Standard 标准的markdown
  • multimarkdown 混合
    具体gfm和standard有何不同,可以查看此教程gfm的markdown语法
    sublime Text搭建markdown环境及预览配置
    建议将三个setting的User文件都配置一下,这里贴出我自己的配置
{
  "color_scheme": "Packages/MarkdownEditing/MarkdownEditor-Yellow.tmTheme", //主题设置
  "wrap_width": "auto", //行宽
  "draw_centered": false, //是否居中开始编辑
}

如果还需要更加详细的个人配置,可以参考默认配置项说明来定制个性化设置
sublime Text搭建markdown环境及预览配置

1.3 配置快捷键

如上图,可以看到下拉选项菜单最后两个是Key Bindings,设置用户user快捷键,附上我的(alt+m在浏览器中查看当前的md文件效果)

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

2. markdownPreview的安装和配置

同上,搜索框输入markdownPreive进行插件下载安装,然后进行用户自定义的配置
sublime Text搭建markdown环境及预览配置
附上我的配置,具体如何配置可以查看左侧markdownPreivew.settings.default.json文件,如果想保存成md文件之后按下快捷键在浏览器中预览,这个字段配置必须修改成"build_action": "browser",,(默认为"build_action": "build")

{
  "browser": "default",
  "parser": "markdown",
  "build_action": "browser",
  "github_mode": "gfm",

}

以上就配置好了,接下来这节安装一个markdown插件支持自动生成标题和目录MarkdownTOC

3. markdownTOC的安装和配置

安装同上,安装完成后在tools菜单下会多出一个菜单如图
sublime Text搭建markdown环境及预览配置
用户自定义配置如下

{
  "defaults":
  {
    "autoanchor": false,
    "autolink": true, //目录以链接形式呈现
    "bracket": "round",
    "levels": [1, 2, 3, 4, 5, 6],
    "indent": "\t",
    "remove_image": true,
    "link_prefix": "",
    "bullets": ["-"],
    "lowercase": "all",
    "style": "ordered", //目录自动编号 unordered不自动排序
    "uri_encoding": false,
    "markdown_preview": "github"
  }, 
}

关于MarkdownTOC更多配置和特点,可以参考官网给出的文档说明MarkdownTOC文档

3. 实战

ctrl+N创建一个文档,sublime界面右下角选择文档类型为markdown-》gfm,然后工具栏菜单 插入TOC,接着编写md文档内容如下
sublime Text搭建markdown环境及预览配置

ctrl+s保存,alt+m浏览器预览,效果如下
sublime Text搭建markdown环境及预览配置

谢谢阅读

上一篇:Sublime各种快速处理数据大法分享


下一篇:Sublime Text 简单教程