您的位置:

探究VS Code的Markdown预览功能

一、介绍

VS代码(VS Code)是由微软开发的一款轻量级代码编辑器,支持多种编程语言。其拥有丰富的功能和插件架构,其中Markdown预览功能是其中之一。本文将从多个方面详细阐述VS Code的Markdown预览功能。

二、基础使用

有人或许会问:什么是Markdown呢?Markdown是一种轻量级的标记语言,旨在让写作者专注于文本而不是排版样式。在VS Code中撰写Markdown文件后,按下Ctrl+Shift+V即可打开Markdown预览窗口,预览效果如下:

# 我是一级标题
## 我是二级标题
### 我是三级标题
我是普通文本
太阳 | 月亮
---- | ----
热    | 冷
白天 | 黑夜
**我是粗体字**
*我是斜体字*

Markdown预览的显示效果如下:

我是一级标题

我是二级标题

我是三级标题

我是普通文本

太阳 月亮
白天 黑夜

我是粗体字

我是斜体字

三、自定义CSS文件

Markdown预览中的样式可以通过自定义CSS文件进行修改。方法如下:

  1. 新建一个.css文件;
  2. 将自定义的样式写入.css文件中;
  3. 在VS Code的设置界面(File -> Preferences -> Settings)搜索Markdown.styles,在“User”栏目中填入自定义的.css文件路径,如下图所示:
"markdown.styles": [
    "自定义的.css路径"
]

预览效果如下,自定义了

标签的字体颜色为红色:

<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<p style="color:red">我是自定义颜色的段落内容</p>

我是一级标题

我是二级标题

我是三级标题

我是自定义颜色的段落内容

四、代码块高亮

在Markdown预览中,我们可以使用三个反引号“```”将代码进行包裹,实现代码块的显示。而且,代码块还能够进行高亮显示:

```python
# 这是python代码块
def test():
    print("Hello World!")
```

预览效果如下:

```python # 这是python代码块 def test(): print("Hello World!") ```

五、数学公式支持

在Markdown预览中,VS Code还支持MathJax插件,实现数学公式的支持:

<del>公式1:$$\int_0^1 x^2 \mathrm{d}x$$ </del>
公式2:$$\frac{1}{1+\frac{1}{x}}$$
公式3:$$(a+b)^2 = a^2+2ab+b^2$$

预览效果如下:

公式1:$$\int_0^1 x^2 \mathrm{d}x$$

公式2:$$\frac{1}{1+\frac{1}{x}}$$

公式3:$$(a+b)^2 = a^2+2ab+b^2$$