这种做法可能会对你的磁盘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())
  • 1

耐心等待操作完成,之后关闭并重新打开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">
  • 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,
  • 1

经过实测,0.15是一个比较能接受的值,不会对磁盘造成频繁读写的影响,延迟也不大。
最后就是打开本文档的自动保存功能了:
按下ctrl+shift+P打开快速菜单,键入’auto’

选择到current file only按下回车
状态栏应该显示
至此,自动保存将在文档更改0.15秒后触发一次,停止自动保存就将上述步骤再做一次即可。


现在我们就能够开双侧窗口一边编辑一边预览了~

使用Sublime Text 3进行Markdown 编辑+实时预览的更多相关文章

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

    使用Sublime Text 3进行Markdown编辑+实时预览 安装软件包管理器 打开Sublime Text 3 同时按下 ctrl+` ,窗口底部出现一个小控制台 复制以下代码,粘贴到控制台的 ...

  2. Sublime Text 3 使用MarkDown编写带预览的文本

    看到别人使用一个叫Markdown的标记语言来完成编码,心里就有点小激动,毕竟简短的几个符号,就可以写出如此精美的界面,实在是让人感到心旷神怡啊.于是我就在网上搜索了一些相关项的设置,于是便有了下面的 ...

  3. 详细讲解使用Sublime Text 3进行Markdown编辑和实时预览

    所需安装的插件 Markdown Editing // Markdown编辑和语法高亮 Markdown Preview// Markdown导出html预览 LiveReload// 时时预览 安装 ...

  4. sublime text 3 配置在浏览器中快速预览

    1.打开Sublime,在菜单栏找到 preferences->package control->输入install package,回车 2.在弹出的输入框里输入SideBarEnhan ...

  5. 一个支持实时预览的在线 Markdown 编辑器 - Markdoc

    最近组内需要为一些项目和系统写文档,发表在公司内的文档平台上,这个平台并不支持markdown,所以打算做一个在线markdown编辑器,支持实时预览,并且可以很容易的迁移发表到公司文档平台上,所以就 ...

  6. 实时预览的在线 Markdown 编辑器 - Markdoc

    实时预览的在线 Markdown 编辑器 - Markdoc 最近组内需要为一些项目和系统写文档,发表在公司内的文档平台上,这个平台并不支持markdown,所以打算做一个在线markdown编辑器, ...

  7. Sublime下MarkDown插件实现编辑和实时预览并转换成HTML格式

    最近在使用markdown做笔记,编辑器Sublime Text3用起来很轻巧,现在让他支持markdown的语法并且可以实时预览. 安装准备——安装Package Control Package C ...

  8. sublime 如何安装插件实现高效输入,如何支持markdown 语法,并实时预览

    啊,一直想鼓捣markdown的语法,但是配置什么的有点麻烦.不过用起来的话,真心顺手.无需考虑格式与语法点来点去影响效率, 用心去搬砖,用脚修bug 一.初识 Package Control 首先, ...

  9. Linux入门(16)——Ubuntu16.04下配置sublime text 3使用markdown

    sublime text 3安装两个插件: MarkDown Editing OmniMarkupPreviewer 有的人使用 MarkDown Editing markdownpreviewer ...

随机推荐

  1. opencv学习之路(26)、轮廓查找与绘制(五)——最小外接矩形

    一.简介 二.轮廓最小外接矩形的绘制 #include "opencv2/opencv.hpp" using namespace cv; void main() { //轮廓最小外 ...

  2. 通过WireShark抓取iPhone联网数据方法

    通过WireShark抓取iPhone联网数据方法 命令行 rvictl -s <UDID> 然后再wireshark选择rvi0进行抓包即可 抓包完后,移除用命令 rvictl -x & ...

  3. 【做题】agc016d - XOR Replace——序列置换&环

    原文链接 https://www.cnblogs.com/cly-none/p/9813163.html 题意:给出初始序列\(a\)和目标序列\(b\),都有\(n\)个元素.每次操作可以把\(a\ ...

  4. Mac OS X 显示和隐藏文件

    参考: mac系统如何显示和隐藏文件 Mac OSX系统 显示和隐藏文件 1.显示隐藏文件: 打开Terminal,并输入以下命令: defaults write com.apple.finder A ...

  5. 初始Vue

    渐进式 JavaScript 框架 通过对框架的了解与运用程度,来决定其在整个项目中的应用范围,最终可以独立以框架方式完成整个web前端项目 走进Vue what -- 什么是Vue 可以独立完成前后 ...

  6. QuerySet API

    模型objects:这个对象是 django.db.model.manager.Manger 的对象,这个类是一个空壳类,它上面的所有方法都是从 QuerySet 这个类中拷贝过来的. >> ...

  7. selenium+Java使用内容记录(全)

    1.模拟键盘操作,使用enter键 2.等待几秒 3.浏览器最大化 4.获取cookie,删除cookie 5.模拟鼠标 6.selenium+java 识别验证码(数字+字母组合) 7.seleni ...

  8. ckeditor5 增加居中alignment

    https://ckeditor.com/docs/ckeditor5/latest/builds/guides/integration/installing-plugins.html 克隆下来 gi ...

  9. JxBrowser之四:对Http Response Code的处理

    1.由于各种原因,客户端或者服务端都可能出现err,比如服务端无响应的504 Gateway Time-out 4×× 客户错误 5×× 服务器错误 2.使用下面代码,当发生错误时,重新加载对应的ur ...

  10. 《Practical Vim》第五章:命令行模式

    前言 出于历史原因,命令行模式又叫 Ex 模式,它具有的功能有: 读写文件:比如 :edit, :write 等等 创建标签页或者窗口:比如 :tabnew :split 操作缓存区,比如: bnex ...