龙陌的博客

外观

vitePress中的Markdown语法 ​

目录表 (TOC) ​

text
[[toc]]

自定义容器 ​

默认标题 ​

text
::: info
This is an info box.
:::

::: tip
This is a tip.
:::

::: warning
This is a warning.
:::

::: danger
This is a dangerous warning.
:::

::: details
This is a details block.
:::

自定义标题 ​

text
::: danger STOP
危险区域，请勿继续
:::

::: details 点我查看代码
    ```js
    console.log('Hello, VitePress!')
    ```
:::

GitHub 风格的警报 ​

text
> [!NOTE]
> 强调用户在快速浏览文档时也不应忽略的重要信息。

> [!TIP]
> 有助于用户更顺利达成目标的建议性信息。

> [!IMPORTANT]
> 对用户达成目标至关重要的信息。

> [!WARNING]
> 因为可能存在风险，所以需要用户立即关注的关键内容。

> [!CAUTION]
> 行为可能带来的负面影响。

在代码块中实现行高亮 ​

text
    ```js{4}
    export default {
      data () {
        return {
          msg: 'Highlighted!'
        }
      }
    }
    ```
text
除了单行之外，还可以指定多个单行、多行，或两者均指定：

多行：例如 {5-8}、{3-10}、{10-17}
多个单行：例如 {4,7,9}
多行与单行：例如 {4,7-13,16,23-27,40}

也可以使用注释实现行高亮。
```markdown
    ```js
    export default {
      data () {
        return {
          msg: 'Highlighted!'
        }
      }
    }
    ```
text
## 代码块中聚焦
在某一行上添加注释将聚焦它并模糊代码的其他部分。

此外，可以使用 // [!code focus:<lines>] 定义要聚焦的行数。

## 代码块中的颜色差异
在某一行添加或 // [!code ++] 注释将会为该行创建 diff，同时保留代码块的颜色。

## 高亮“错误”和“警告”
在某一行添加或 // [!code error] 注释将会为该行相应的着色。


## 代码组


    ::: code-group
    
    ```js [config.js]
    /**
     * @type {import('vitepress').UserConfig}
     */
    const config = {
      // ...
    }
    
    export default config
    ```
    
    ```ts [config.ts]
    import type { UserConfig } from 'vitepress'
    
    const config: UserConfig = {
      // ...
    }
    
    export default config
    ```
    
    :::

交互式复选框语法如下： ​

  • Screen width (integer)
  • Service worker support
  • Fetch support
  • CSS flexbox support
  • Custom elements

功能快捷键 ​

撤销：Ctrl/Command + Z 重做：Ctrl/Command + Y 加粗：Ctrl/Command + B 斜体：Ctrl/Command + I 标题：Ctrl/Command + Shift + H 无序列表：Ctrl/Command + Shift + U 有序列表：Ctrl/Command + Shift + O 检查列表：Ctrl/Command + Shift + C 插入代码：Ctrl/Command + Shift + K 插入链接：Ctrl/Command + Shift + L 插入图片：Ctrl/Command + Shift + G 查找：Ctrl/Command + F 替换：Ctrl/Command + G

==标记文本==

引用文本

H~2~O is是液体。

2^10^ 运算结果是 1024.

如何创建一个注脚 ​

一个具有注脚的文本。[1]

Markdown中的变量引用 ​

https://blog.csdn.net/jianchengss/article/details/79829501

变量定义 格式，支持中文 😃

text
[baidu]:http://www.baidu.com
[我的主页]:http://www.jianchengss.com
[image-qr-code]: https://gitee.com/jianchengss/resources/raw/master/images/weixin/mp_QR-code/Jason_pinyaxuan_8.jpg
[image-error]: https://www.baidu.com/Jason_pinyaxuan_8.jpg

定义的变量可以在文档的任何位置，而且在正文中不显示，比如说本文底部定义了上面代码块里的变量，供下面示例使用，不过页面上是看不到的。

注意！链接写的时候一定要带 http://,不然链接不生效，不要问我是怎么知道的！！

变量使用

markdown
### 示例1

直接把key放入[],这样显示文本是key，链接为value
（但是两个放在一行会出问题，而且要空一行才能正确显示两个。。。。）:

[baidu] [我的主页]  ← 这里有两，只会显示第一个，估计识别成两个中括号的模式了（因为鼠标放上去显示链接是第二个变量值，两个中括号中间空格无效）

[baidu]

[我的主页]

### 示例2

自定义链接显示文本 + key，分别在[]里：

[百度][baidu] [我的主页][我的主页]

### 示例3

图片中引用变量：

直接使用，前面加感叹号，这样图片失效的时候显示的是key，图片显示是value指向的图片：

![image-qr-code]
![image-error]

### 示例4

感叹号+[图片失效是显示文本] + [key], 自定义图片失效是显文本:

![图片失效是显示文本][image-qr-code]

![图片加载失败][image-error]

Contributors ​

作者:Long Mo
字数统计:1k 字
阅读时长:4 分钟
Long Mo
文章作者：Long Mo
版权声明： 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来自 Longmo Docs ！

  1. 注脚的解释 ↩︎

Copyright © 2024-present Longmo