Sublime Text3 的 Markdown 实时预览全面总结

Sublime Text3 的 Markdown 实时预览全面总结如前文《SublimeText3的插件管理工具(PackageControl)的安装及使用方法》所说,Sublime有强大的插件扩展功能,本文介绍如何在用Sublime写Markdown文档时,做到效果预览。1.插件介绍先介绍两个有关Markdown的常用插件:MarkdownEditing和MarkdownPreviewMarkdownEditing顾名思义,Ma…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

如前文《Sublime Text3 的插件管理工具(Package Control)的安装及使用方法》所说,Sublime有强大的插件扩展功能,本文将详细介绍在用Sublime写Markdown文档时如何预览,甚至是实时刷新预览。


0. 温习:插件安装方式,后面会反复用到

  1. 组合键Ctrl+Shift+P 调出命令面板
  2. 输入Package Control: Install Package,回车
  3. 在搜索框中输入要安装的包名(一个一个,不能同时安多个)
  4. 静待几秒即可安装成功

插件介绍

介绍几个Markdown类的常用插件:

插件 功能
MarkdownEditing 一个提高Sublime中Markdown编辑特性的插件
MarkdownPreview Markdown转HTML,提供在浏览器中的预览功能
MarkdownLivePreview 提供在编辑框中实时预览的功能
LiveReload 一个提供md/html等文档的实时刷新预览的的插件

接下来会一次介绍这几个插件。


1. MarkdownEditing

顾名思义,Markdown编辑器,是Markdown写作者必备的插件,不仅可以高亮显示Markdown语法还支持很多编程语言的语法高亮显示。
特别注意:MarkdownEditing只针对 md\mdown\mmd\txt 格式文件才启用。

特性

MarkdownEditing 从视觉和便捷性上针对 Markdown 文档的编辑进行了一系列的优化。如:

  • 颜色方案仿 Byword及iA writer
  • 自动匹配星号(*)、下划线(_)及反引号(`)
  • 选中文本按下以上符号能自动在所选文本前后添加配对的符号
  • 方便粗体、斜体和代码框的输入
效果图:

这里写图片描述

2. MarkdownLivePreview

功能

实时预览Markdown文件,左侧为md文件,右侧为预览结果。可配合MarkdownEditing一起使用。

使用

MarkdownLivePreview默认关闭实时预览,既然安装这个插件了,那肯定是要用的。打开方式为在Preferences -> Package Settings -> MarkdownLivePreview -> Settings 的设置的右侧加一条 "markdown_live_preview_on_open": true,,重启sublime即可。

为什么不能直接将左侧对应的false改为true,这是因为左侧为默认配置,是不能改的(只读),右侧的编辑区才是用户自定义区。

效果图

以下为配合MarkdownEditing的效果:
这里写图片描述
实际预览效果并不理想,很丑,而且不能横向滚动,也就是说如果一行显示不过来那你就看不到 了。偶然也会有些卡,所以其实推荐的是下面这个插件。

3. MarkdownPreview

功能
  1. 支持在浏览器中预览markdown文件
  2. 将md文件导出为html代码
将md文件用浏览器预览——1.常规方法
  1. 组合键 Ctrl+Shift+P 调出命令面板
  2. 输入mdp找到并选中Markdown Preview: Preview in Browser
  3. 出现两个选项:githubmarkdown。任选其一即可,github是利用GitHub的在线API来解析.md文件,支持在线资源的预览,如在线图片它的解析速度取决于你的联网速度。该方式据说一天只能打开60次。markdown就是传统的本地打开,不支持在线资源的预览。
  4. 默认浏览器中显示预览结果
将md文件用浏览器预览——2.用快捷键打开

Sublime Text支持自定义快捷键,Markdown Preview默认没有快捷键,我们可以自己为Markdown Preview: Preview in Browser设置快捷键。
方法是在Preferences -> Key Bindings打开的文件的右侧栏的中括号中添加一行代码:

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

这里:

"alt+m" 可设置为自己喜欢的按键。
"parser": "markdown"也可设置为"parser":"github",改为使用Github在线API解析markdown。

以上两种方式都有个问题:每次预览都要打开一个新的网页,而且需要手动操作。有没有一个方法,可以打开一个网页后,之后再也不用管,让它实时刷新预览呢?

有,还很简单,答案就是MarkdownPreview+LiveReload
LiveReload是一个可实时刷新的插件,不仅可用于Markdown,也可用于HTML等。


4. (最强)实时自动刷新预览:MarkdownPreview + LiveReload

先安装并配置Markdown Preview

如前Markdown Preview安装成功后,设置前文所述的快捷键(如需),打开其配置文件 Preferences -> Package Settings -> Markdown Preview -> Settings,检查左侧enable_autoreload条目是否为true,若是,跳过。若不是,右侧栏加一条下面这个后重启Sublime:

{
    "enable_autoreload": true }

安装并配置LiveReload

Ctrl+Shift+p, 输入 Install Package,输入LiveReload, 回车安装
安装成功后, 再次Ctrl+shift+p, 输入LiveReload: Enable/disable plug-ins, 回车, 选择 Simple Reload with delay (400ms)或者Simple Reload,两者的区别仅仅在于后者没有延迟。

开始使用

如前面提到的手动或者快捷键打开预览网页,之后便再也不用管它,只要你的sublime保存一次,网页那边就会自动刷新预览,美滋滋。

但是呢,有个遗留的问题:网页预览不能跟随你的sublime编辑位置,还需要你滑动页面。
在这一点上,CSDN-Markdown可以说很优秀了,本文就是在该编辑器下完成的。

作者:张渊猛

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/157420.html原文链接:https://javaforall.net

(0)
上一篇 2022年7月27日 下午6:16
下一篇 2022年7月27日 下午6:16


相关推荐

  • Coreseek:第二步建索引及測试

    Coreseek:第二步建索引及測试

    2022年1月24日
    52
  • 单纯形法解释

    单纯形法解释单纯形法的理解理解单纯形法之前必须要知道一下若干定理或者知识 对于 Ax b A m n x n 1 b n 1Ax b quadA m n quadx n 1 quadb n 1Ax b A m n x n 1 b n 1 可以写成下列形式 Ax A1 A2 An x1x2 xn A1x1 A2x2 Anxn bAx A 1 A 2 A

    2026年3月19日
    2
  • Leetcode 差分数组的应用「建议收藏」

    Leetcode 差分数组的应用「建议收藏」题目1解法这个题目普通解法参见这里不过这里面的做法都是nlog(n)的。实际上利用差分数组,这道题目可以有O(n)做法这边简单提一下差分序列,对于一个数组,差分序列的定义是数组中前一个值和后一个值的差值形成的新数组。我们在原数组某个区间加上一个统一的值,正常的做法需要在原数组每个位置去叠加,而体现在差分数组上只需要对区间两端的值进行变化即可,差分数组的prefixsum其实就是原数组。比如原数组为:num=[1,1,1,2,2,3]差分数组为:diff_num=[1,0,0,1,0,

    2022年6月3日
    38
  • Wappalyzer-python 安装

    Wappalyzer-python 安装1 主机环境 ubuntu16 04 内核 4 4 0 31 genericx86 64anaconda2 7 4 02 需要安装的 python 模块 requestslxml 已经安装过 PyV8 搞了一个上午 pip 翻墙 svn 源代码各种 也没装成 最后找解决方案的时候看到心明的日志 我也搜到类似的 由于没有 python2 7 版本

    2026年3月20日
    2
  • Matlab function函数如何使用

    Matlab function函数如何使用步骤 1 创建 m 文件 m 文件中用关键字 function 定义函数 定义函数的格式如下 function 输出变量 函数名称 输入变量 输入变量和输出变量可以是一个 也可以是多个 function 输出变量 函数名称 输入变量 注释 函数体 2 保存 m 文件时 一定要用函数名称保存 m 文件 举例如下 function a b c test d e f a

    2026年3月16日
    2
  • Pytorch(一) Pytorch 的安装[通俗易懂]

    Pytorch(一) Pytorch 的安装[通俗易懂]安装步骤1.检查是否有合适的GPU,若有安装Cuda与CuDNN2.下载pytorch安装文件,进行pytorch的安装检查电脑是否有合适的GPU在桌面上右击如果能找到NVIDA控制面板,则说明该电脑有GPU。控制面板如下,并通过查看系统信息获取支持的Cuda版本点击帮助->点击系统信息弹出下面的对话框,在驱动程序版本那一栏就能看到该计算机使用的驱动版本。…

    2022年6月24日
    34

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号