VitePress-07-文档中代码块的使用全解

说明

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

代码块的基本语法

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

语法格式：
    ```语言名称
        代码内容
    ```

例如：一个java的代码块
    ```java
      System.out.println("hello world");
    ```

文档内容

# 代码块的基本使用
	```java
		public 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
  }
})

文档内容

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

效果

方式二 ：局部标记

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

文档内容

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

效果

补充 ： 指定行号的起始值

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

文档内容

	# 代码块-配置启用行号-指定行号起始值
	```java:line-numbers=101
	public 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 是一个数字，代表要聚焦的行数

文档内容

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

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

效果展示

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

代码删除/新增标记

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

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

文档内容

    # 代码块-删除/新增标记
    ```java
    public 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]

文档内容

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

效果展示

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