在 VS Code 中用 Markdown 做「数字化」学习笔记

您所在的位置：网站首页 › 怎么做笔记图文软件 › 在 VS Code 中用 Markdown 做「数字化」学习笔记

在 VS Code 中用 Markdown 做「数字化」学习笔记

2024-07-13 05:38| 来源: 网络整理| 查看: 265

教程向: 在 VS Code 中用 Markdown 做「数字化」学习笔记

VS Code 配上 Markdown 语言, 就能写出酷炫, 便捷, 且适应互联网的「数字化」学习笔记.

这个教程是我这段时间踩过各种各样的坑之后, 总结 VS Code 做学习笔记的最佳实践.

如果你对在 VS Code 中做笔记有什么好的主意, 欢迎留下你的意见, 我会第一时间在教程中加入!

环境搭配安装 VS Code

前往官网下载 VS Code, 点击 Download, 就会自动开始下载:

如果网速较慢, 你也可以在腾讯软件中心下载.

进入安装界面, 将选项全部勾选, 点下一步和安装, 直到安装完成即可.

中文支持 (选做)

如果你不想看英文, 想要中文版本的 VS Code, 你可以安装一个中文支持插件. 虽然我个人不太喜欢, 但是每个人都有自己的喜好嘛.

打开 VS Code, 点击插件面板, 输入 Chinese, 选择出现的第一个插件进行 Install 安装.

安装好后, 按照右下角提示重启 VS Code.

可以看出, 界面以及变为中文了.

安装 Markdown 相关插件

为了良好的记笔记体验, 你需要安装和 Markdown 相关的 VS Code 插件:

你可以下载我整理的这个 Extension Pack, 它包括了下面这些插件:

Markdown Preview Enhanced Markdown All in One Better Markdown & Latex Shortcuts Latex Sympy Calculator Python Brackets Orangex4 Snippets Paste Image Vscode Icons

就像安装中文支持那样操作, 点击插件面板, 搜索 Markdown-Notes-Pack, 点击 Install 进行安装, 可能会花一点时间.

第一个 Markdown 文件: Hello World! 新建笔记工作区

工作区是什么?

工作区就是一个文件夹, 在你做笔记的时候, 工作区应该是你的笔记的根文件夹.

例如, 我在 D 盘创建了一个文件夹 D:\Notes, 那么我的工作区就应该是这个 D:\Notes 文件夹.

你可以像我一样, 在 D 盘新建一个 Notes 文件夹, 并在 VS Code 中打开这个文件夹.

在工作区子笔记文件夹

我个人比较喜欢将笔记按照不同的课程放在不同的文件夹下, 比如在我们的 Markdown 学习之旅中, 我们可以先新建一个文件夹叫 Learn.

新建一个文件, 命名为 test.md, 注意后缀一定要是 .md!!! 这样表明它是一个 Markdown 文件. 你的所有笔记文件都应该以 .md 作为后缀.

写下第一行 Markdown 笔记

输入笔记内容:

1# Hello, World!

(注意, # 和文本之间要加入空格!)

然后按照先后顺序按下快捷键 Ctrl + K, V, 然后在右边就会出现预览窗口.

(注意, 快捷键按下时要连贯, 并且按下 V 的同时不用按 Ctrl 键!)

如果正常地显示出了标题 “Hello, World!”, 那么恭喜你, 第一个 Markdown 笔记写成功了!

修改预览窗口背景 (选做)

相信聪明的你已经发现了一个问题:

为什么我的预览窗口是白色的, 太刺眼了! 为什么你的预览窗口和代码窗口颜色一样?

诶, 别急, 这就告诉你. 这里的预览窗口的 Markdown Preview Enhanced 插件生成的. 你只需要修改一下这个插件的配置就可以了.

按下快捷键 Ctrl + ,, 就会打开设置窗口.

在搜索框输入 Preview Theme, 看见标题为 Preview Theme 的选项, 在下拉框中选择 atom-dark.css, 就能让预览窗口的颜色改变了.

(当然, 颜色还是和 VS Code 有一点差别, 就不要在意这些细节啦)

Markdown 语法

纯粹的 Markdown 语法其实非常简单, 70 行的语法介绍就可以写完.

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576# 一级标题## 二级标题### 三级标题每写完一个段落要隔一行空行.就像这样, 隔了一行空行.---分割线**重点加粗***斜体*~~删除线~~---列表:* 无序列表 * 嵌套无序列表 * 嵌套无序列表* 无序列表* 无序列表1. 有序列表 1 1. 嵌套有序列表 1 2. 嵌套有序列表 22. 有序列表 23. 有序列表 3---引用文本:> 引用别人说的话> 就这样写> By. OrangeX4---这是 `行内代码` 语法.代码块语法:''' pythonprint("Hello, World!")'''请将 ' 替换成 `.---[超链接名称](链接地址)![图片提示语](图片地址)---表格:| 表头 | 表头 || ---- | ---- || 内容 | 内容 || 内容 | 内容 |---注释: 标题

你可以用

1234567# 一级标题## 二级标题### 三级标题段落.

或

12345一级标题=======二级标题-------

的方式表示标题, 个人更推荐前一种方式. (不用对齐, 强迫症福音!)

段落 123段落和段落之间要隔一行.就像这样. 分割线 12345三条横线 (或更多的横线) 表示分割线.---就像这样.

加粗, 斜体和删除线

做笔记的时候, 我们常常会有这样的要求, “加粗, 斜体和删除线”, 作为笔记的

12345**重点加粗***斜体*~~删除线~~

Markdown Preview Enhanced 拓展功能:

1==高亮==

快捷键:

选中文本之后, 按下 Ctrl + B 可以给选中文本加粗.

同理 Ctrl + I 可以让选中文本变为斜体.

列表

列表是记笔记时非常基本的元素, 在 Markdown 中, 可以用很方便的格式书写列表:

1234567891011* 无序列表 * 嵌套无序列表 * 嵌套无序列表* 无序列表* 无序列表1. 有序列表 1 1. 嵌套有序列表 1 2. 嵌套有序列表 22. 有序列表 23. 有序列表 3

Markdown Preview Enhanced 拓展功能:

1234567任务列表:- [x] 已经完成的事 1- [x] 已经完成的事 2- [x] 已经完成的事 3- [ ] 仍未完成的事 4- [ ] 仍未完成的事 5

快捷键:

要进行缩进 (书写嵌套列表), 你可以使用 VS Code 的快捷键 Ctrl + [ 和 Ctrl + ].

这个快捷键可以将代码向左或向右进行缩进!

引用和代码 123456789101112131415引用文本:> 引用别人说的话> 就这样写> By. OrangeX4这是 `行内代码` 语法.代码块语法:''' pythonprint("Hello, World!")'''注意要将 ' 替换成 `.

Markdown Preview Enhanced 拓展功能:

123456789代码行数的显示:''' javascript {.line-numbers}function add(x, y) { return x + y}'''注意要将 ' 替换成 `.

超链接和图片

你可以用下面的语法插入超链接和图片:

123456789101112131415[超链接名称](链接地址)![图片提示语](图片地址)例如, 可以使用网址和图床:[OrangeX4's Blog](https://orangex4.cool/)![OrangeX's Avatar](https://orangex4.cool/images/icons/profile.jpg)也可以在本地用相对地址:[Other](other.md)![OrangeX's Avatar](images/profile.jpg)

剪贴板图片插入

看了上面的插入图片语法, 也许你会觉得, 好麻烦啊.

我就插入一张图片, 居然还要把图片上传到网上. 或者把图片保存到本地, 还要移动图片, 命名什么的.

就不能像 Word 那样, 直接剪贴板粘贴图片吗?

万能的 VS Code 当然可以做到类似的事!

其实, 使用你已经安装了的 Paste Image 插件就行.

不过在使用之前, 你要做一点小调整:

按下 Ctrl + , 打开设置窗口, 输入 Paste Image Path 并搜索, 将框内的文本改成 ${currentFileDir}/images.

注意标题是 Paste Image: Path, 不要弄错了!

设置好之后, 你就可以使用剪贴板粘贴功能了!

按下快捷键 Ctrl + Alt + V,

就能把图片自动保存到当前目录下, 并以正确的格式粘贴到当前的 Markdown 文件中.

表格

你可以很方便地在做笔记的时候加入表格:

123456表格:| 表头 | 表头 || ---- | ---- || 内容 | 内容 || 内容 | 内容 |

Markdown Preview Enhanced 拓展功能:

1234567891011拓展语法:| 表头 | 表头 || ---- | ---- || 内容 | 内容 || > | 内容 || 表头 | 表头 || ---- | ---- || 内容 | 内容 || ^ | 内容 |

快捷键:

自动表格对齐: Shift + Alt + F

注释

注释不会被渲染出来.

你可以随手做点草稿, 如果还想保留着, 但是不显示, 就可以按下快捷键 Ctrl + \ 将当前行注释 / 反注释.

123456注释:

有一点很重要的就是, VS Code 会在你每次修改代码之后, 重新渲染一遍.

如果有很多很多的数学公式, 渲染会很慢, 这时候有两个建议:

分成多个文件, 避免单文件过大! 将你暂时不看的部分注释掉, 加快渲染速度! 数学公式支持

Markdown 的数学公式吸纳了大部分的 Latex 语法, 你可以以一种简单的方式在 VS Code 中书写数学公式.

123456789101112行内公式: 单位圆 $x^2+y^2=1$公式块:$$\begin{cases}x=\rho\cos\theta \\y=\rho\sin\theta \\\end{cases}$$

VS Code 有着非常便捷好用的自动补全功能, 只需要简单地打出你想打的内容的几个字母 (乱序也行), 再使用 ↑ ↓ 进行选择, 最后按下回车就可以打出你想要的内容.

再使用 HyperSnips 插件, 就能够写得飞快.

还有, 不要在公式内使用中文, 除非是 \text{中文} (但是也不推荐)

1. 上标和下标 123上标 $x^2 + y^{12} = 1$上标 $x_1 + y_{12} = 1$

HyperSnips 自动扩展：

123456789xsr => x^{2}xtp => x^{...}x1 => x_1xii => x_ixsb => x_{...} 2. 分式 123较小的行内行分数 $\frac{1}{2}$展示型的分式 $\displaystyle\frac{x+1}{x-1}$

其中 \displaystyle 用于将行内展示转为块状展示.

HyperSnips 自动扩展：

123451/ => \frac{1}{...}(1 + 2)/ => \frac{(1+2)}{...}// => \frac{...}{...} 3. 根式 123开平方 $\sqrt{2}$开 $n$ 次方 $\sqrt[n]{2}$

HyperSnips 自动扩展：

1hsq => \sqrt{...} 4. 空格

数学公式中的空格和换行都会在编译时被忽略，想要实现「空格」的效果，需要用特别的命令。

12345678910111213紧贴 $a\!b$没有空格 $ab$小空格 $a\,b$中等空格 $a\;b$大空格 $a\ b$quad 空格 $a\quad b$两个 quad 空格 $a\qquad b$

5. 累加, 累乘和积分 12345累加 $\sum_{k=1}^n\frac{1}{k} \quad \displaystyle\sum_{k=1}^n\frac{1}{k}$累乘 $\prod_{k=1}^n\frac{1}{k} \quad \displaystyle\prod_{k=1}^n\frac{1}{k}$积分 $\displaystyle \int_0^1x{\rm d}x \quad \iint_{D_{xy}} \quad \iiint_{\Omega_{xyz}}$

HyperSnips 自动扩展：

1234567sum => \sum_{...}prod => \prod_{}^{} ...int => \intdint => \int_{}^{} ... \mathrm{d}x

Tips：按下 Tab 键可以跳转光标。

6. 括号修饰

用 \left 和 \right 可以让括号适配内部大小

1234567圆括号 $\displaystyle \left(\sum_{k=1}^{n}\frac{1}{k} \right)^2$方括号 $\displaystyle \left[\sum_{k=1}^{n}\frac{1}{k} \right]^2$花括号 $\displaystyle \left\{\sum_{k=1}^{n}\frac{1}{k} \right\}^2$尖括号 $\displaystyle \left\langle\sum_{k=1}^{n}\frac{1}{k} \right\rangle^2$

HyperSnips 自动扩展：

123456789@( => \left( ... \right)@[ => \left[ ... \right]@{ => \left\{ ... \right\}@< => \left< ... \right>set => \{ ... \} 7. 多行算式对齐 12345678910111213141516171819居中:$$\begin{aligned}y &=(x+5)^2-(x+1)^2 \\&=(x^2+10x+25)-(x^2+2x+1) \\&=8x+24 \\\end{aligned}$$左对齐:$\begin{aligned}y &=(x+5)^2-(x+1)^2 \\&=(x^2+10x+25)-(x^2+2x+1) \\&=8x+24 \\\end{aligned}$

HyperSnips 自动扩展：

1234ali =>\begin{aligned}... \\\end{aligned}

如果你安装了 Better Markdown & Latex Shortcuts 插件，你还可以按下 Shift + Ctrl + Alt + C 可以将行公式转为 aligned 环境。

8. 方程组 12345678$$\begin{cases}k_{11}x_1+k_{12}x_2+\cdots+k_{1n}x_n=b_1 \\k_{21}x_1+k_{22}x_2+\cdots+k_{2n}x_n=b_2 \\\cdots \\k_{n1}x_1+k_{n2}x_2+\cdots+k_{nn}x_n=b_n \\\end{cases}$$

HyperSnips 自动扩展：

1234case =>\begin{cases}... \\\end{cases} 9. 矩阵 123456789101112131415161718192021222324252627282930矩阵:$$\begin{pmatrix}1 & 1 & \cdots & 1 \\1 & 1 & \cdots & 1 \\\vdots & \vdots & \ddots & \vdots \\1 & 1 & \cdots & 1 \\\end{pmatrix}\quad\begin{bmatrix}1 & 1 & \cdots & 1 \\1 & 1 & \cdots & 1 \\\vdots & \vdots & \ddots & \vdots \\1 & 1 & \cdots & 1 \\\end{bmatrix}$$ 行列式: $$\begin{vmatrix}1 & 1 & \cdots & 1 \\1 & 1 & \cdots & 1 \\\vdots & \vdots & \ddots & \vdots \\1 & 1 & \cdots & 1 \\\end{vmatrix}$$

HyperSnips 自动扩展：

123bmat2 => \begin{bmatrix} ... & ... \\ ... & ... \\\end{bmatrix}vec2 => \begin{pmatrix} ... \\ ... \\\end{pmatrix}

tips：按下 Tab 键可以切换到下一个位置。

10. 特殊字符

更多特殊符号可以上网查询

可以搜索 “Latex 符号表”

HyperSnips 自动扩展：

123alpha => \alphaSigma => \Sigma 11. 公式编号与引用 1234567891011$$x+2 \tag{1.2}$$$$\begin{equation}x^n+y^n=z^n\end{equation}$$由公式 $(1.2)$ 可得到结论

12. 零碎的重要语法点乘 $\cdot$, 叉乘 $\times$, 异或 $\otimes$, 直和 $\oplus$, 加减 $\pm$, 复合 $\circ$. 小于等于 $\leq$, 大于等于 $\geq$, 不等 $\neq$, 恒等 $\equiv$, 约等 $\approx$, 等价 $\cong$, 相似 $\sim$, 相似等于 $\simeq$, 点等 $\doteq$. 逻辑与 $\land$, 逻辑或 $\lor$, 逻辑非 $\lnot$, 蕴涵 $\to$, 等价 $\leftrightarrow$. 因为 $\because$, 所以 $\therefore$, 存在 $\exist$, 任意 $\forall$. 左小箭头 $\leftarrow$, 右小箭头 $\rightarrow$, 左大箭头 $\Leftarrow$, 右大箭头 $\Rightarrow$, 右长箭头 $\xrightarrow[fgh]{abcde}$. 属于 $\in$, 包含于 $\subset$, 真包含于 $\subseteq$, 交 $\cap$, 并 $\cup$, 空集 $\empty$ 短向量 $\vec{x}$, 长向量 $\overrightarrow{AB}$, 上横线 $\overline{p}$. 无限 $\infty$, 极限 $\lim$, 微分 ${\rm d}$, 偏导 $\partial$, 点求导 $\dot{y}$, 点二阶导 $\ddot{y}$, 变化量 $\Delta$, 梯度 $\nabla$. 横省略 $\cdots$, 竖省略 $\vdots$, 斜省略 $\ddots$. 常见函数 $\sin$, $\cos$, $\tan$, $\arcsin$, $\arccos$, $\arctan$, $\ln$, $\log$, $\exp$.

HyperSnips 自动扩展：

12345678910111213141516171819202122232425262728** => \cdotxx => \timesotimes => \otimes \le!= => \neq== => \equiv~~ => \thickapproxsim => \simland => \landlor => \lorbec => \becausethr => \thereforeEE => \existsAA => \forallinn => \insse => \subseteqsqs => \sqsubseteqcap => \capcup => \cupempty => \emptyoo => \inftylim => \lim_{ \to }dd => \mathrm{d}part => \frac{\partial }{\partial }Delta => \Deltanabla => \nabla... => \cdotssin => \sin

还有特别重要的数集、向量、矩阵符号：

123456789101112131415RR => \mathbb{R}NN => \mathbb{N}txt => \text{...}xbar => \bar{x}xhat => \hat{x}xhvec => \vec{x}xhdot => \dot{x}Xbb => \mathbb{X}Xbs => \boldsymbol{X}Xbm => \bm{X}Xbf => \mathbf{X}Xsf => \mathsf{X}Xcal => \mathcal{X}Xfrak => \mathfrak{X}Xrm => \mathrm{X} 输出为 PDF

我们在右侧预览栏右键菜单, 选择在浏览器中打开.

在浏览器中右键选择打印.

就能够输出为 PDF 了.

类似 UltiSnips 的自动补全

也许你曾经看过这篇文章：

机器之心：世界上最好的编辑器Vim：1700多页数学笔记是如何实时完成的于是你很想试一下, 然后就被 Vim 和 Latex 给劝退了。

但是实际上, VS Code 完全能够替代 Vim, Markdown 在记笔记方面也完全能够替代 Latex. 通过 VS Code 插件 HyperSnips for Math, 你就可以像用 UtliSnips 一样使用各种神奇的 Snippets.

插件安装: HyperSnips for Math - Visual Studio Marketplace

安装完成后, 按下快捷键 Ctrl + Shift + P, 输入命令 Open Snippets Directory, 就可以打开一个文件夹. 在该文件夹新建一个文件 markdown.hsnips, 并将这个网址里面的内容输入进去, 保存, 就可以使用了.

例如, 你可以在数学环境中输入: (1+2)/, 它会自动变为 \frac{1+2}{}.

你也可以创建自己的 Snippets, 按照格式, 发挥想象来写就好!

先看个普通例子:

123snippet RR "R" iAm\mathbb{R}endsnippet

这是一个在数学环境中自动展开的 Snippet, 它有三个标示符 iAm, 分别代表 “在词语内部也会触发”, “自动展开” 和 “数学环境”.

这个例子会在数学环境内, 自动将 RR 展开成为 \mathbb{R}, 代表 “实数”.

再看个正则表达式的例子:

123snippet `((\d+)|(\d*)(\\)?([A-Za-z]+)((\^|_)(\{\d+\}|\d))*)/` "Fraction no ()" Am\frac{``rv = m[1]``}{$1}$0endsnippet

其中 rv = m[1] 是 JavaScript 代码, 表示将正则表达式的第一个组 m[1] 输出给 “返回值” rv, 然后输出出去.

这是一个在数学环境中自动展开的 Snippet, 它有两个标示符 ‘Am’, 分别代表 ‘自动展开’ 和 ‘数学环境’. 用处是:

11/ ---> \frac{1}{}

相比于原来的 HyperSnips, 最大特点是, 它只会在数学环境 $...$, $$...$$, $...$ 和 \[...\] 中自动展开!

还有 ${VISUAL} 语法:

123snippet fr "frac" iAm\\frac{${1:${VISUAL}}}{$2}endsnippet

这个语法会保存最近选中的内容, 然后替换掉 ${VISUAL} 部分.

要开启在 markdown 下的自动补全提示, 请使用 Shift + Ctrl + P 然后输入 open settings json 打开配置文件, 然后加入以下部分:

123"[markdown]": { "editor.quickSuggestions": true}, VS Code 快捷键

快捷键是用 VS Code 记笔记的精髓之一, 每一个都非常重要!

请务必认真记住这些快捷键!!!

原生快捷键通用操作 Ctrl + C, 复制当前文本 Ctrl + V, 粘贴当前文本 Ctrl + Z, 撤销 Ctrl + Shift + Z, 反撤销 Shift + Alt + F, 整理代码 Ctrl + /, 将当前行注释 / 反注释, 当多行文本被选中时, 将多行文本注释光标操作 Ctrl + ← 将光标向左移动一个单词 Ctrl + → 将光标向右移动一个单词 Ctrl + Alt + ↑, 向上加入一个光标 Ctrl + Alt + ↓, 向下加入一个光标 Ctrl + Alt + U, 撤销上次光标操作界面移动 Ctrl + ↑ 向上移动当前界面 Ctrl + → 向下移动当前界面选中操作 Shift + ← 向左选中 / 反选中一个字符 (重要) Shift + → 向右选中 / 反选中一个字符 (重要) Ctrl + Shift + ← 向左选中 / 反选中一个单词 (重要) Ctrl + Shift + → 向右选中 / 反选中一个单词 (重要) Ctrl + D 当前有选中文本时, 将下一个与其相同的文本加入选中 (重要) 文本行操作 Ctrl + C 当前无选中文本时, 复制当前行 Shift + Alt + ↑ 向上复制当前行, 当多行文本被选中时, 向上复制多行 (重要) Shift + Alt + ↓ 向下复制当前行, 当多行文本被选中时, 向下复制多行 (重要) Alt + ↑ 向上移动当前行, 当多行文本被选中时, 将当前多行文本向上移动 (重要) Alt + ↓ 向下移动当前行, 当多行文本被选中时, 将当前多行文本向下移动 (重要) 插件增加的快捷键 Markdown 语法 Ctrl + B 当前有选中文本时, 将文本加粗 Ctrl + I 当前有选中文本时, 将文本变为斜体 Ctrl + M 进入数学公式模式 (加入美元符) 图片粘贴 Ctrl + Alt + V 粘贴剪贴板图片 (本地) Ctrl + Alt + V 粘贴剪贴板图片 (图床) 光标操作 Ctrl + Alt + U 将多选光标变为单选选中操作 Shift + Alt + ← 向左复制当前选中文本 (重要) Shift + Alt + → 向右复制当前选中文本 (重要) Alt + ← 向左移动当前选中文本一个字符 (重要) Alt + → 向右移动当前选中文本一个字符 (重要) Ctrl + Alt + ← 向左移动当前选中文本一个单词 (重要) Ctrl + Alt + → 向右移动当前选中文本一个单词 (重要) 计算器功能 Ctrl + Shift + Alt + E 计算当前选中表达式, 用等号连接并输出 Ctrl + Shift + Alt + R 计算当前选中表达式, 并替换当前选中表达式 Ctrl + Shift + Alt + D 定义当前选中表达式, 无输出科学计算

使用我开发的一个插件 Latex Markdown Calculator , 可以很方便地在 VS Code 中用 Latex 公式语法进行科学计算。

即选中一段数学表达式, 按下一个快捷键就能帮你计算出结果, 一些简单的计算再也不用打开电脑自带的计算器和 Matlab~

因为是基于 Python Sympy 的, 所以现在它已经有很多强大的功能了。

比如说：符号运算, 求积分, 求微分, 基于矩阵的符号运算(如行列式, 点乘, 转置, 求逆等功能), 解方程…

快捷键为 Shift + Ctrl + Alt + E, 详细内容请查看插件的说明文档.