使用Sublime Text 3进行Markdown 编辑+实时预览

啥都有 专栏收录该内容
2 篇文章 0 订阅

这种做法可能会对你的磁盘IO造成一小部分性能负担,但负面影响足以忽略。

另外,由于这种频率的读写会被磁盘缓存接管,不必担心磁盘寿命的影响。


对于刚安装好的Sublime Text,我们需要安装一个软件包管理器:

同时按下ctrl+`,将会在窗口底部出现一个小控制台:
//图片
我们把这段话复制并粘贴到控制台的编辑栏里:

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

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

安装我们要用到的插件

按下ctrl+shift+P打开快速菜单,键入’pcip’:
这里写图片描述
回车,等待数据更新,完成后会主动显示软件列表。
在里面输入以下软件名称并回车进行安装:
Markdown Editing // Markdown编辑和语法高亮支持
Markdown Preview// Markdown导出html预览支持
auto-save // 可自定义的自动保存功能
耐心等待操作完成,之后关闭并重新打开Sublime Text 3.

前两个是标准的markdown编辑与预览工具,第三个是实现实时预览的关键
安装结束后我们新建一个md文档试试。

实现实时预览功能

先说最基本的预览,我们基于此实现实时预览

我们使用Markdown Preview插件来打开浏览器进行预览:
按下ctrl+shift+P打开快速菜单,键入’mp’
这里写图片描述
之后选择markdown即可打开你的默认浏览器来预览刚才的内容。
一定要记得先在磁盘上保存为一个文件,这样才能转化成html。

开挂!实现浏览器自动刷新

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

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

0.1负责表示刷新间隔,单位是秒,个人觉得这是一个比较稳妥的设定值。
太快的话我们难以滚动页面,太慢的话有可能体验很差。
为了不让滚动时编辑的新文字触底,我们在最后一行的刷新代码之上打好几个占空间的行即可。
由于空行不会被解析,我们在每一行之前放一个字符#或者打三个以上的减号表示分割线。

最后一步:实现md文档到html文件的自动更新

这里我们用到了一个叫做auto-save的插件,它可以针对一个文档实现空闲x秒后自动保存。
我们打开auto-save的默认设置和用户设置文件:
Preference->Package Settings->Auto-save->打开Settings-Defualt和Settings-User
将Default的内容复制粘贴到User里面,然后修改等待时长:

  "auto_save_delay_in_seconds": 0.15,

经过实测,0.15是一个比较能接受的值,不会对磁盘造成频繁读写的影响,延迟也不大。
最后就是打开本文档的自动保存功能了:
按下ctrl+shift+P打开快速菜单,键入’auto’
这里写图片描述
选择到current file only按下回车
状态栏应该显示这里写图片描述
至此,自动保存将在文档更改0.15秒后触发一次,停止自动保存就将上述步骤再做一次即可。


现在我们就能够开双侧窗口一边编辑一边预览了~
这里写图片描述

当初装sublime的时候在csdn上没找到比较好的插件合集 费了一点功夫自己整合了一下 该集合包括了多种常用插件emmet jsFormat git相关 以及css和php js jquery html5等语言的支持增强插件等 已安装utf8和gbk插件 完美支持中文输入 包含codeIntel和cTags Filediff 侧边栏增强等一系列插件方便开发使用 此外收集了网上的5套主题 多达40几种配色方案 支持自定义外观 默认主题为扁平化flatland 预览:http://lucifr.com/2013/04/12/flatland-theme-for-sublime-text-2/ 请阅读链接中的主题替换方法 以便之后完整替换主题 安装方法: 1.sublime text3版本: 打开sublime text3 依次点击工具栏中的preference->browse packages 到一个类似C:\Users\Adiministor\AppData\Roaming\Sublime Text 3\Packages 的目录 转到向上一级 C:\Users\Adiministor\AppData\Roaming\Sublime Text 3 下 把压缩包中的4个文件夹解压到这个路径覆盖即可 若有自己已定义的内容请先备份 之后再把自己的东西覆盖回去 2.sublime text2版本: 测试过sublime text2 同样通过上述方法可以到相应的路径中 (可能是C:\Users\Adiministor\AppData\Roaming\Sublime Text 2) 然后把压缩包中文件夹解压到C:\Users\Adiministor\AppData\Roaming\Sublime Text 2覆盖 接下来 最重要的一步!! 是到 C:\Users\Adiministor\AppData\Roaming\Sublime Text 2\Packages\User 这个路径下 把Default (Windows).sublime-keymap这个文件的内容全部删掉 或者只保留[]这两个符号 (这里面定义了一些系统默认快捷键 可能是sublime text2只支持32位? 如果不删除的话会导致st2无法启动) 我还是很懒的 喜欢把一些插件集合起来用 但是具体还是要看个人的需求吧 通过package control有太多的插件可供安装 希望这个插件集合能给大家带来一点小便利 方便刚装sublime text的用户哈
©️2021 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值