Code Tabs
Mr.Hope ... 2022-6-4 Less than 1 minute
The plugin provides you code tabs support.
Note
This feature requires vue@2.7+, and it's not stable, we recommand you to use Code Group instad.
# Config
module.exports = {
plugins: [
[
"md-enhance",
{
// adds code tabs support
codetabs: true,
},
],
],
};
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
# Usage
This is the same as tabs function, but it's special built for code blocks.
Only code fence after @tab marker is allowed inside code tabs, other markdown content will be ignored.
# Demo
Install VuePress Theme Hope:
Install VuePress Plugin Markdown Enhance:
Code
Install VuePress Theme Hope:
::: code-tabs#shell
@tab pnpm
```bash
pnpm add -D vuepress-theme-hope@next
```
@tab yarn
```bash
yarn add -D vuepress-theme-hope@next
```
@tab:active npm
```bash
npm i -D vuepress-theme-hope@next
```
:::
Install VuePress Plugin Markdown Enhance:
::: code-tabs#shell
@tab pnpm
```bash
pnpm add -D vuepress-plugin-md-enhance@next
```
@tab yarn
```bash
yarn add -D vuepress-plugin-md-enhance@next
```
@tab:active npm
```bash
npm i -D vuepress-plugin-md-enhance@next
```
:::
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47