Tab 栏案例

在 vuepress 中使用 tab 栏

---

• 案例演示
• 简写

案例演示

无高亮的 Tabs：

# install in your project
yarn add -D vuepress@next

# create a markdown file
echo '# Hello VuePress' > README.md

# start writing
yarn vuepress dev

# build to static files
yarn vuepress build

# install in your project
npm install -D vuepress@next

# create a markdown file
echo '# Hello VuePress' > README.md

# start writing
npx vuepress dev

# build to static files
npx vuepress build

有高亮的 Tabs：

package main

import (
	"fmt"
)

func main() {
  fmt.println("hello world")
}

这里是测试 tab 2 的内容

简写

vuepress2.0.0-beta.46 及其后续版本支持此功能，此写法会自带行号，可通过 ```bash:no-line-numbers 来去除行号。

输入：

    :::: code-group
    ::: code-group-item FOO
    ```js
    const foo = 'foo'
    ```
    :::
    ::: code-group-item BAR
    ```js
    const bar = 'bar'
    ```
    :::
    ::::

输出：

const foo = 'foo'

const bar = 'bar'

新版的 vuepress 可用简写实现 tab 栏效果：tab 栏简写