vitepress-plugin-tabs
A plugin that adds syntax for showing content in tabs.
Installation
sh
npm i -D vitepress-plugin-tabs
Usage
After installing the plugin, you'll need to edit both App Config and Theme Config.
ts
// .vitepress/config.ts
import { defineConfig } from 'vitepress'
import { tabsMarkdownPlugin } from 'vitepress-plugin-tabs'
export default defineConfig({
markdown: {
config(md) {
md.use(tabsMarkdownPlugin)
}
}
})
ts
// .vitepress/theme/index.ts
import Theme from 'vitepress/theme'
import { enhanceAppWithTabs } from 'vitepress-plugin-tabs/client'
export default {
...Theme,
enhanceApp({ app }) {
enhanceAppWithTabs(app)
}
}
Syntax
Tabs with non-shared selection state
md
:::=tabs
::a
a content
::b
b content
:::
:::=tabs
::a
a content 2
::b
b content 2
:::
a content
a content 2
Tabs with shared selection state
md
:::=tabs=ab
::a
a content
::b
b content
:::
:::=tabs=ab
::a
a content 2
::b
b content 2
:::
a content
a content 2