个人使用 Sublime Text3 过程中收集整理的一些技巧和方法。

安装插件、卸载插件

安装 Package Control

打开 Package Control 的网页 https://packagecontrol.io ,点击右侧的 Install Now 按钮;

Package Control 官网

Package Control 为插件管理包,所以我们首先要安装它。有了它,我们就可以很方便的浏览、安装和卸载 Sublime Text 中的插件。官网安装步骤的一些相关说明,如下图所示:

官网安装步骤说明

第一步 Win 系统,在Sublime Text中:同时按下Ctrl + Shift + P,会打开命令面板;

第二步 然后输入:Install Package Control ,按 Enter ,即会开始安装 Package Control

第三步 等待 Package Control 安装完成。之后使用Ctrl + Shift + P打开命令板,输入PC应出现 Package Control:(如下图所示,即为安装成功)

安装成功

安装插件

同时按Ctrl + Shift + P打开命令板,输入PCIP, 然后下选点击 Package Control: Install Package

安装插件

会出现一个输入框,输入你想要安装的插件,然后选择它,即可进行安装。

卸载插件

卸载比较容易,同时按Ctrl + Shift + P打开命令板,输入PCRP然后然后下选点击 Package Control: Remove Package ;

卸载插件

然后选择你要卸载的插件,就可以卸载了。

已安装插件

失去焦点自动保存

第一步 Preference(首选项)-> Settings(设置);

打开设置文件

第二步 打开的界面是分两边的,左边是只读的不能编辑,在左边区域Ctrl + F(查找),然后在下面输入框里输入 save_on_focus_lost

查找代码

第三步 复制这行代码到右边的框里,然后把 false ,改成 true ,保存后关闭窗口,大功告成,今后就不用手动Ctrl + S了,Nice!!!

修改完成

懒得查找的,也可以直接复制下面这段代码粘贴到右边区域,保存关闭窗口即可;

1
"save_on_focus_lost": true,

实现 Markdown 编辑和实时预览

安装所需的插件

按下Ctrl + Shift + P打开快速菜单,输入 pcip

安装插件

回车,等待数据更新,完成后会主动显示软件列表。

在里面输入以下软件名称并回车进行安装:

1
2
3
4
Markdown Editing      // Markdown编辑和语法高亮支持
OmniMarkupPreviewer   //本地hsot实时预览
Markdown Preview   // Markdown导出html预览支持
auto-save   // 可自定义的自动保存功能

耐心等待操作完成,之后关闭并重新打开 Sublime Text 3.

前两个是标准的 Markdown 编辑与预览工具,第三个是实现实时预览的关键。

安装好的 Markdown 插件

实现实时预览

方法一

安装 OmniMarkupPreviewer 插件;

在浏览器中预览:Ctrl + Alt + O

导出HTML:Ctrl + Alt + X

标记拷贝至剪贴板:Ctrl + Alt + C

  • 便可以实现实时预览;
  • 输出样式的修改

默认情况下,在目录 OmniMarkupPreviewer -> Public 下,修改 Github.css 文件即可。

如果想要修改控制样式输出的 .css 文件,可以在首选项 -> 插件设置 -> OmniMarkupPreviewer -> Settings-User 中修改 html_template_name 选项对应的文件名即可。

上面的修改只是修改了你在浏览器中的预览的样式,如果想要同步修改输出的样式
默认情况下,在目录 OmniMarkupPreviewer -> templates 下,修改 github-export.tpl 文件即可。
比如:想要修改输出 HTML 中内容区域的整体宽度,就需要同时修改 github.cssgithub-export.tpl 这两个文件中的 .containermax-width 的值即可。这样就可以保证在预览和导出时的样式都是一致的。

方法二

更改 MarkdownPreview.sublime-settings, 启用 enable_autoreload

依次点击 Preference(首选项)–> Package Settings –> Markdown Preview –> Settings ,打开 Markdown Preview 设置文件;

打开设置文件

输入以下代码:

1
"enable_autoreload": true,
输入代码

如何打开预览

我们使用 Markdown Preview 插件来打开浏览器进行预览:

按下Ctrl + Shift + P打开快速菜单,键入 mp

选择 Markdown Preview

选择 Markdown;

选择 Markdown

自定义快捷键

直接在浏览器中预览效果的话,可以自定义快捷键:点击 Preferences(首选项)–> 选择 Key Bindings User(快捷键设置):

打开快捷键设置

输入以下代码;

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

输入代码

保存后,直接输入快捷键:Alt + M就可以直接在浏览器中预览生成的HTML文件了。

实现浏览器自动刷新

对于浏览器而言,我们让它自动刷新只需在md文件最下面加入一行:

1
<meta http-equiv="refresh" content="0.1">

0.1 负责表示刷新间隔,单位是秒,这是一个比较合适的设定值。

太快的话我们难以滚动页面,太慢的话有可能体验很差。

为了不让滚动时编辑的新文字触底,可以在最后一行的刷新代码之上打好几个占空间的行即可。

由于空行不会被解析,在每一行之前放一个字符#或者打三个以上的减号表示分割线。

md文档到html文件的自动更新

这里我们用到了一个叫做 Auto-Save 的插件,它可以针对一个文档实现空闲 x 秒后自动保存。

我们打开 Auto-Save 的默认设置和用户设置文件:

依次点击 Preference(首选项)–> Package Settings –> Auto-save –>打开 Settings-DefualtSettings-User;

Auto-save设置

Default 的内容复制粘贴到 User 里面,并复制以下代码到 User 设置文件:

Default 文件 User 文件
1
"auto_save_delay_in_seconds": 0.15,

经过实测,0.15 是一个比较能接受的值,不会对磁盘造成频繁读写的影响,延迟也不大。

最后就是打开本文档的自动保存功能了:

按下Ctrl + Shift + P打开快速菜单,键入 auto

如果是写带图片的文章,反复刷新会影响使用,我一般写博客是打开生成本地静态文件,用浏览器预览,采用失去焦点自动保存 ,体验更佳。