说明

本文会介绍 vitepress 中markdown文档对 代码块的支持特性，
包括基本使用、代码高亮、展示行号、指定代码行高亮、代码聚焦、以及代码删除/新增标记、代码错误和警告标记 等特性的使用。

代码块的基本语法

代码块的基本效果就是 ：代码高亮展示，用于区分于其他的普通文本。

语法格式：```语言名称代码内容```例如：一个java的代码块```javaSystem.out.println("hello world");```

文档内容

# 代码块的基本使用```javapublic class HelloWorld{public static void main(String[] args){System.out.println("hello world");}}```

效果

展示行号

默认情况下，vitepress 中的代码块是不展示行号的。

展示行号有两种方式：
方式一 ： 全局配置文件中配置 lineNumbers:true 属性
方式二 ：代码块中添加 :line-numbers / :no-line-numbers 标记来启用或禁用行号,这种方式会覆盖方式一的配置。

方式一 ： 全局配置

配置文件

/*** 这是整个项目的配置文件*/
import { defineConfig } from 'vitepress'export default defineConfig({......markdown:{lineNumbers:true}
})

文档内容

# 代码块-全局配置启用行号```javapublic class HelloWorld{public static void main(String[] args){System.out.println("hello world");}}```

效果

方式二 ：局部标记

语法 ：
直接在代码块类型的后面添加 :line-numbers 即表示开启行号
直接在代码块类型的后面添加 :no-line-numbers 即表示关闭行号展示

文档内容

	# 代码块-配置启用行号```java:line-numberspublic class HelloWorld{public static void main(String[] args){System.out.println("hello world");}}```# 代码块-配置【不】启用行号```java:no-line-numberspublic class HelloWorld{public static void main(String[] args){System.out.println("这是没有行号的代码块");}}```

效果

补充 ： 指定行号的起始值

说明 ： 行号默认是从1开始的，如果想改变这个值，可以通过:line-numbers=n 的方式，直接指定行号从n开始

文档内容

	# 代码块-配置启用行号-指定行号起始值```java:line-numbers=101public class HelloWorld{public static void main(String[] args){System.out.println("hello world");}}```

效果

指定代码行高亮

代码块的作用是将块内的内容进行高亮展示，区别于其他的文本。
在代码块中，也可以指定某些行高亮，突出重点的代码行。
具体的表现就是 ： 指定的行就像多了阴影一样。

语法格式 ： 在 :line-numbers 之后添加 {xxx}即可
指定单行 ： {5} : 表示底行高亮
指定多行：{2-5} : 表示 第2到第5行 高亮
指定多个单行 ：{2,3,8} : 表示 第2第3第8行 高亮
单行与多行混合 ：{2,3,6-8} : 表示 第2第3 第6到第8行 高亮

文档内容

# 代码块-行高亮-单行```java:line-numbers {2}public class HelloWorld{public static void main(String[] args){System.out.println("hello world");}}```# 代码块-行高亮-多行```java:line-numbers {2-4}public class HelloWorld{public static void main(String[] args){System.out.println("hello world");}}```# 代码块-行高亮-多个单行```java:line-numbers {2,4}public class HelloWorld{public static void main(String[] args){System.out.println("hello world");}}```# 代码块-行高亮-单行与多行混合```java:line-numbers {1,3-5}public class HelloWorld{public static void main(String[] args){System.out.println("hello world");}}```

效果

代码聚焦

代码聚焦的效果是 ：凸显指定的内容，并模糊其他的部分，从而使重点突出。

基本语法 ：// [!code focus]

用法 ： 在需要聚焦的行后添加上述标注即可。
补充 ： // [!code focus:xxx] : xxx 是一个数字，代表要聚焦的行数

文档内容

    # 代码块-聚焦-单行```javapublic class HelloWorld{public static void main(String[] args){System.out.println("hello world"); // [!code focus]}}```# 代码块-聚焦-连续多行```javapublic class HelloWorld{public static void main(String[] args){ // [!code focus:3]System.out.println("hello world");}}```

效果展示

当鼠标不在代码块上的时候，只会清晰的展示被标注的部分，其他的部分自动模糊。
但是，当鼠标放上去的时候，整个代码块就会变清晰。

代码删除/新增标记

这个功能就类似于 git 中的代码的删除与新增的展示效果。

基本语法 ：
删除标注 ：// [!code --]
新增标注 ：// [!code ++]

文档内容

    # 代码块-删除/新增标记```javapublic class HelloWorld{public static void main(String[] args){System.out.println("hello world"); // [!code --]System.out.println("hello new world"); // [!code ++]}}```

效果展示

代码错误/警告标记

这个也算是一个特殊的标记吧，可以提示读者哪些代码有错误。
这个功能的效果也是通过行的颜色来表示的。

基本语法 ：
错误标注 ：// [!code warning]
警告标注 ：// [!code error]

文档内容

    # 代码块-错误/警告标记```javapublic class HelloWorld{public static void main(String[] args){System.out.println("hello world"); // [!code warning]System.out.println("hello new world"); // [!code error]}}```

效果展示

至此，代码块的常用的使用操作就完成了。