代码块分组

Mr.Hope ... 2022-1-22 Markdown
  • Codegroup
  • Markdown
小于 1 分钟

主题为你带来了代码块分组支持。

# 配置




 




module.exports = {
  themeConfig: {
    mdEnhance: {
      codegroup: true,
    },
  },`
};
1
2
3
4
5
6
7

# 使用

你需要在外围使用 code-group 容器,并仅在内部放置 code-group-item 容器。

你需要给 code-group-item 容器设置标题,并将待展示的单个代码块放入 code-group-item 容器中。

如果你需要令某个选项卡被默认激活,你可以在标题后补充 :active 后缀。

# 演示

:::: code-group

::: code-group-item yarn

```bash
yarn add -D vuepress-theme-hope
```

:::

::: code-group-item npm:active

```bash
npm i -D vuepress-theme-hope
```

:::

::::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
上次编辑于: 2022年1月22日 04:23
贡献者: Mr.Hope