第四章 遨游在“宇宙第一编辑器”——VS Code之中
4.1 基础配置
在介绍Markdown相关的内容之前,我们要先对VSCode进行一些基础的配置,其实主要是安装几个必备的插件——中文插件、主题插件、快捷键插件,这会使接下来的写作体验更好。
4.1.1 中文插件
1. 安装中文插件
- 使用快捷键Command+Shift+X(macOS)或 Ctrl+Shift+X(Windows)进入插件市场。
- 在搜索框中输入[Chinese]。
- 在搜索结果中单击【Chinese(Simplified)Language Pack for Visual Studio Code】
- 在详情页单击【Install】安装插件。
- 重启生效。
2. 切换语言
- 打开命令面板:菜单栏 →【查看】→【命令面板...】或使用快捷键:Shift+Command+A (macOS)/Ctrl+Shift+A (Windows)。
- 在命令面板输入框中输入[Configure Display Language],然后按回车键。
- 在列出的已安装语言列表中进行切换,重启后生效。
4.1.2 主题插件
1. 选择主题插件
推荐安装One Dark Pro主题插件,这是一款非常经典而且安装人数最多的主题,它不光配色漂亮,据说还护眼。
2.切换主题
单击左下角活动栏上的【管理】图标→【颜色主题】→在显示的已安装的主题列表中切换主题即可
小提示: 推荐大家安装文件图标主题插件,这会让图标看起来更清晰漂亮。这里推荐Material Icon Theme或vscode-icons这两款图标主题插件
4.1.3 快捷键插件
常用的快键键插件:
- IntelliJ IDEA Key Bindings for Visual Studio Code
- Sublime Text Keymap and Settings Importer
- Visual Studio Keymap
- Atom Keymap
- Vim
- Notepad++keymap
- Eclipse Keymap
4.1.4 禁用/启用插件
进入插件管理界面会看到:搜索框、【已启用】、【推荐】、【已禁用】。
默认已安装的插件处于启用状态。如果想卸载或禁用某个插件,可以在【已启用】列表中查找,然后在详情页中选择禁用或卸载插件。禁用的插件会在重启后停用,可在【已禁用】列表中查看和重新启用这些插件。
4.2 写作体验
- 新建一个空文件夹“vscode-md”,用VS Code打开,此时资源管理器中会显示:打开的编辑器、VSCODE-MD 和大纲。现在它们都是空的。
- 单击 VSCODE-MD 右边的新建文件图标,新建一个“README . md”文件,由于我们之前安装了图标主题插件,在该文件之前会显示一个文件图标。
- 在README . md中输入一些内容来查看整个界面的显示情况。
在【大纲】视图中可以很方便地对Markdown文件大纲进行查看、筛选、查找和切换。然后,设置大纲列表,勾选以下选项。
- 跟随光标:在编辑Markdown文件时,大纲列表会跟随光标所在位置进行切换。
- 在输入时筛选:在大纲视图中直接输入内容时对大纲进行筛选,如果不勾选就只有查找功能(高亮显示查找结果,不会进行筛选)。
4.2.1 预览
若要预览Markdown文件,在资源管理器中的文件名上单击鼠标右键→选择【打开预览】→即可显示Markdown文件的预览界面。
macOS系统 | Windows系统 |
---|---|
Command + Shift + V | Ctrl + Shift + V |
也可以在源码编辑界面单击右上角的【打开侧边预览】图标进入经典的Markdown编辑模式。如下图所示(左边为源码编辑界面,右边为预览界面)。
小提示: 两边的滚动是同步的,双击预览界面可切换到源码界面。
- 增强预览
默认的预览功能比较简单,很多语法都不支持,有些语法渲染的效果也不是很好,这时我们需要通过插件来增强预览功能。我们需要安装一个增强预览插件——Markdown Preview Enhanced。
安装完成后,在源码编辑界面,单击鼠标右键,在弹出的操作选项中单击【Markdown Preview Enhanced:Open Preview】,打开增强预览界面,然后你会看到任务列表和表格都变得更美观了。
小提示: 如果想显示文件的目录,可以在预览界面按Esc键。
4.2.2 超级Markdown插件MPE
Markdown Preview Enhanced(以下简称MPE)是一款超级强大的Markdown插件,官方文档这样形容它——让你拥有飘逸的Markdown写作体验。
Typora支持的所有Markdown语法,包括GFM、数学公式、图表、目录等,MPE基本都支持。如果你已经很熟悉Typora的使用,那么使用MPE也会很轻松。除此之外,MPE还支持引用文件和制作幻灯片。
1.插入目录
- 直接在文件中输入
[TOC]
然后按回车键,这种方式比较通用,在Typora中也可以正常渲染。 - 调出命令行面板,输入
[TOC]
,在联想出来的命令列表中单击[Markdown Preview Enhanced:Create TOC],保存后可正常渲染目录。
小提示: 在目录生成后,如果文中内容有更改,保存后,目录也会自动更新。
2.引用文件
MPE可以非常方便地引用外部文件,它支持引用 .md、.csv、.jpg、.png、.gif、.html、.pdf 等格式的文件。
- 语法格式
@import "文件名"
或者
<!-- @import "文件名" -->
a. 引用Markdown文件
@import "README.md"
b. 引用图片
MPE可引用的图片格式包括:.jpg、.gif、.png、.apng、.svg、.bmp。
可以直接引用图片:
@import "Rabbit.jpg"
在引用图片的同时还可以设置图片的大小:
@import "Rabbit.jpg"{width="200px" height="150px" title="Rabbit" alt="This is my Rabbit"}
c. 引用csv文件
被引用的csv文件会被直接解析成表格
3.幻灯片
MPE使用reveal.js来渲染幻灯片,这比直接使用reveal.js来创建幻灯片更加简单便捷。
a. 创建幻灯片
幻灯片通过<! -- slide -- >
来分页。
幻灯片会随着光标进行切换,如果你感觉在编辑器中查看不方便,也可以通过浏览器查看。具体方法是在预览界面单击鼠标右键,选择【Open in Browser】,就可以了。
小提示: 不管是在编辑器中,还是在浏览器中,如果想要切换到幻灯片的预览界面,直接按Esc键就可以了。
- 示例演示
<!-- slide -->
# 第一页
<!-- slide -->
# 第二页
b. 切换幻灯片主题
幻灯片默认使用白色主题,如果想切换主题可以这样设置:
---
presentation:
theme: solarized.css
---
- 更多可选的主题
· beige.css
· black.css
· blood.css
· league.css
· moon.css
· night.css
· serif.css
· simle.css
· sky.css
· solarized.css
· white.css
· none.css
· white.css(默认)
小提示: reveal.js提供的配置选项都可以在MPE中非常方便地进行配置,想了解更多配置选项可参考官方文档。
4. 导出文件
a. 导出HTML文件
在MPE中,把Markdown格式的文件导出为HTML文件非常简单,只需在预览界面上,单击鼠标右键,选择【HTML】→【HTML(offline)】即可,HTML文件会被导出到与当前Markdown文件同级的目录中。
可是在默认情况下,当Markdown文件有改动时,HTML文件并不会同步更新,如果想做到这一点,需要在Markdown文件头部加上如下代码
---
export_on_save:
html: true
---
b. 导出PDF文件——(Puppeteer)
通过工具(Puppeteer)导出PDF文件,需要先安装Puppeteer,在命令行执行如下命令。
npm insatll -g puppeteer
安装完成后,只需在预览界面上单击鼠标右键,选择【Chrome (Puppeteer)】→【PDF】即可,PDF文件会被导出到当前目录中,而且会被自动打开。
小提示: 导出PNG和JPEG格式的图片也是使用Puppeteer,步骤同上。
c. 导出PDF文件——(Prince)
使用Prince导出的PDF文件会自动生成目录,也支持自动导出功能。
如果你使用的是macOS系统,则安装命令如下。
brew install Caskroom/cask/prince
其他操作系统的安装方法请参考https://www.princexml.com/doc-install/。
安装完成后,只需在预览界面上,单击鼠标右键,选择【PDF(prince)】即可,PDF文件会被导出到当前目录中,而且会被自动打开。
如果我们想在修改Markdown文件之后,自动导出最新的PDF文件,只需在Markdown文件头部加上如下代码。
---
export_on_save:
prince: true
---
4.3 高效编辑
4.3.1 命令面板
VS Code有一个命令面板,提供了几乎所有功能的快速访问路径,在命令面板中我们可以进行快速打开文件、运行命令、管理和安装扩展、运行任务、打开视图、行跳转、符号跳转等操作。
使用快捷键Command+P(macOS)或Ctrl+P(Windows)打开命令面板。
注意: 输入框中没有任何符号的,因此默认会列出最近打开过的文件,我们可以在这里快速打开之前打开过的文件。
在命令面板的输入框中输入 [?]可以查看命令面板的操作帮助。
小提示: 在输入框中输入不同的符号,能够切换到不同的操作面板,达到快速操作的目的。
1. 实例演示——运行命令
在输入框中输入[ > ],会切换到运行命令界面,输入命令关键字会列出所有可运行的命令,单击即可运行。
运行命令应该是我们最常用的操作了,因此VS Code提供了快捷键以快速进入命令操作界面。
macOS系统 | Windows系统 |
---|---|
Command + Shift + A | Ctrl + Shift + A |
2. 行跳转
在命令面板的输入框中输入[ : + 行号 ],并按回车键会行跳转到指定的行,被指定的行会高亮显示。
4.3.2 折叠内容
通常,编辑器都有一个非常好用的功能,那就是可以折叠内容结构,这使内容结构更清晰,也更容易阅读。令人惊喜的是,VS Code竟然支持Markdown源码的折叠,当遇到代码块、嵌套列表(有序列表/无序列表/任务列表)时,在编辑器中就会显示折叠图标,单击该图标即可把内容折叠。最棒的是VS Code还支持标题的折叠。
4.3.3 自动保存
VS Code提供了自动保存的功能,它有3种保存策略可供选择。
- afterDelay:当文件修改超过一定的时间(默认是1000ms)时自动保存。
- onFocusChange:当编辑器失去焦点时自动保存更新后的文件。
- onWindowChange:当窗口失去焦点时自动保存更新后的文件。
VS Code默认使用的是第1种策略,执行:菜单栏→【文件】→【自动保存】,开启自动保存,此后,当文件修改超过1000ms时就会自动保存。
如果想修改延迟时间,可以单击活动栏下面的【管理】图标→【设置】→在搜索设置输入框中输入[ 自动保存 ],
4.3.4 智能感知
前面提到过VS Code的智能感知功能,这绝对又是一个神技。通过智能感知可以进行自动补全,可以快速插入Markdown语法和自定义的代码片段。
macOS系统 | Windows系统 |
---|---|
Control + 空格键 | Ctrl + 空格键 |
注意: 在Windows系统下快捷键“Ctrl+空格键”可能会跟输入法的快捷键相冲突,可通过修改快捷键解决。
操作步骤:【管理】→【键盘快捷方式】→在搜索框输入[Trigger Suggest](触发建议)→修改快捷键。
VS Code能够分析当前文件中已使用过的词语,在智能感知界面给出自动补全的提示。
注意: 如果想使用更多快捷键和自动补全的功能,需要安装一个扩展插件——Markdown All in One。
4.3.5 Markdown All in One
Markdown All in One(以下简称MAO)提供了常用的Markdown快捷键和自动补全功能。
操作 | macOS系统 | Windows系统 |
---|---|---|
加粗 | Command + B | Ctrl + B |
斜体 | Command + I | Ctrl + I |
删除线 | Option + S | Alt + S |
提升标题级别 | Control + Shift + ] | Ctrl + Shift + ] |
降低标题级别 | Control + Shift + [ | Ctrl + Shift + [ |
插入数学公式 | Control + M | Ctrl + M |
勾选/不勾选任务项 | Option + C | Alt + C |
1. 格式化表格
表格的标记语法是有规范要求的,手动调整可能有点麻烦,而使用MAO则可以一键格式化表格。
注意: 快捷键可能会因你绑定的键盘而有所不同,默认是Alt+Shift+F(Windows系统)。
2. 图片路径自动联想
当输入图片的 Markdown标记时,MAO会自动联想指定路径(默认是文件所在的路径)下的图片,而且在联想出来的图片列表中可以直接预览图片。
4.3.6 自定义代码片段
在VS Code中,可以自定义常用的代码片段,通过触发智能感知,实现一键插入。方法是打开自定义Markdown代码片段的文件,执行:【管理】→【用户代码片段】→在弹出的面板中选择【markdown.json】,然后,就可以在markdown.json中定义自己的代码片段了。保存后,在Markdown编辑界面通过使用“Ctrl+空格键”组合键调出智能提示。
4.3.7 语法检查
markdownlint就是用来检查这些规范的。安装markdownlint以后,它会自动对Markdown文件进行检查,并在VS Code底部面板中列出检查出来的问题。问题标签上会显示检查出来的问题数量,列表中的问题会根据编辑器中已打开的文件名进行分类,单击具体问题会跳转到编辑器中对应的位置,在位置的上面会显示一个小灯泡图标,单击小灯泡会显示解决问题的提示。
4.3.8 从剪切板直接粘贴图片
在Markdown文件中插入图片一直不太方便,通常需要经历“截图”→“保存”→“导入”这几个步骤,使用Paste Image这个插件能够直接从剪切板粘贴图片到Markdown文件中,也就是说,插入图片只需两步就可以了,即“截图”→“粘贴”。
- 调出命令行面板,输入[Paste Image],按回车键后,截图就被插入到文件中了
- 使用快捷键:Ctrl+Alt+V(Windows系统)/Command+Option+V(macOS系统)
粘贴的图片会被保存到当前编辑的文件所在的文件夹中,格式为PNG,并以当前时间命名。
小提示: 如果快捷键有冲突,我们可以自定义快捷键。操作步骤:【管理】→【键盘快捷方式】→输入[Past Image]→双击快捷键→输入新的快捷键组合→按回车键保存。
4.3.9 打字时的炫酷爆炸效果
使用Power Mode插件能在打字时显示炫酷的爆炸效果,这也是一款非常流行的插件。
需要注意的是,Power Mode在安装后并不会直接开启,需要设置一下。开启Power Mode的方法:【管理】→【设置】→输入[Powermode]→勾选【Enable to active POWER MODE!!!】
4.3.10 拼写检查
Code Spell Checker插件能够帮助我们检查常见的拼写错误,也是必备的插件之一。
4.3.11 禅模式
禅是一种基于“静”的行为,是一种让我们专注于写作的模式。打开VS Code→【菜单栏】→【查看】→【外观】→【切换禅模式】
4.3.12 版本管理
VS Code内置了Git版本管理系统,但功能比较简单,在此推荐3个功能增强插件。
- GitLens:增强了VS Code内置的Git功能。
- Git History:增强了Git提交历史的功能。
- gitignore:可以帮助我们使用.gitignore文件。
由于Git相关的知识点较多,且比较专业,如果想深入了解,还是建议读者系统学习一下,了解Git相关的知识以后,关于这几个插件的使用也就不成问题了。
4.4 本章小结
主要介绍了如何使用VS Code打造一款属于自己的Markdown编辑器,你可以选择自己喜欢的主题,绑定自己熟悉的快捷键,定义自己常用的代码片段,最重要的是学会了选择合适的插件来扩展和增强编辑器的功能。
不过,需要注意的是,一些插件的语法(如MPE引用文件和创建幻灯片)可能不通用,这会导致文档移植起来比较困难。所以如果你的文章需要适应多种不同的平台,建议使用更通用的GFM语法。