随手乱记

一、代码块行高亮

• vitepress 的代码块行颜色差异：

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

输入：

​```js
export default {
  data () {
    return {
      msg: 'Removed'
      msg: 'Added'
    }
  }
}
​```

输出：

​```js
export default {
  data () {
    return {
      msg: 'Removed'
      msg: 'Added'
    }
  }
}
​```

但不一定，比如python的注释符是 # 就要把 // 改成 # ，即# [!code --] 或 # [!code ++]

输入：

a=1
b=2 # [!code --]
c=3 # [!code ++]
d=4

输出：

a=1
b=2
c=3
d=4

二、代码块分组

• vitepress 代码组

可以像这样对多个代码块进行分组：

• 输入：

::: 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
​```

:::

• 输出：

config.js

/**
 * @type {import('vitepress').UserConfig}
 */
const config = {
  // ...
}

export default config

config.ts

import type { UserConfig } from 'vitepress'

const config: UserConfig = {
  // ...
}

export default config

三、gcd ＆ lcm

int gcd(int a, int b){
    int r;
    while(b != 0){
        r = a % b;
        a = b;
        b = r;
    }
    return a;
}

int lcm(int a, int b){
    return abs(a * b) / gcd(a,b);
}

四、VitePress 转义 Vue

• ​ 可以通过使用 v-pre 指令将它们包裹在 <span> 或其他元素中来转义 Vue 插值：

This <span v-pre>{{ will be displayed as-is }}</span>

• 也可以将整个段落包装在 v-pre 自定义容器中：

::: v-pre
{{ This will be displayed as-is }}`
:::

• 便携使用（用于复制）：

<span v-pre>{{}}</span>

<span v-pre>`{{}}`</span>

五、Vitepress 包含 markdown 文件

• 可以像这样在一个 markdown 文件中包含另一个 markdown 文件，甚至是内嵌的。

...

<!--@include: ./tlias_2.md-->