@zenphp/doczilla-tabs
v0.0.1
Published
Markdown-it container plugin with tabs.
Downloads
3
Readme
Doczilla Tabs Plugin
This package is a markdown-it plugin that supplies tabs (mainly for code type variations) for your Vitepress markdown files.
Installation
Doczilla tabs requires:
- vitepress
npm install vitepress @zenphp/doczilla-tabs
Add doczilla-tabs
to your .vitepress/config.{ts,js}
file:
import { tabsMarkdownPlugin } from '@zenphp/doczilla-tabs';
Add the plugin to your markdown
config.
markdown: {
config(md) {
md.use(tabsMarkdownPlugin)
}
},
Enhance your theme with the plugin in .vitepress/theme/theme.{ts,js}
:
import { Theme } from 'your-theme-of-choice';
import { enhanceAppWithTabs } from '@jetstreamlabs/vitepress-plugin-tabs/client';
export default {
...Theme,
enhanceApp({ app }) {
enhanceAppWithTabs(app);
},
};
Doczilla Theme
If you're using our @zenphp/doczilla theme which is Tailwind based and has no default Vitepress css properties, you'll need create a .css
file and import that into your theme config.
/* .vitepress/theme/tabs.css */
:root {
--vp-c-text-2: rgba(235, 235, 245, 0.6);
--vp-c-text-1: rgba(255, 255, 245, 0.86);
/* match shiki light theme */
--vp-c-bg-soft: #222436;
--vp-c-divider: rgba(82, 82, 89, 0.32);
/* match theme primary color */
--vp-c-brand: theme('colors.primary.500');
}
html.dark {
/* match shiki dark theme */
--vp-c-bg-soft: #020617;
}
.plugin-tabs--content > div[class*='language-'] {
@apply m-0;
}
.plugin-tabs--content > div[class*='language-'] pre {
@apply p-0 mt-0 !important;
}
Then import the css into theme.{ts,js}
import { Theme } from 'your-theme-of-choice';
import { enhanceAppWithTabs } from '@jetstreamlabs/vitepress-plugin-tabs/client';
import './tabs.css';
export default {
...Theme,
enhanceApp({ app }) {
enhanceAppWithTabs(app);
},
};
That should be it.
Usage
Open tabs with :::=tabs
and close with :::
Each tab is self closing and requires only ::
and the name to display on the tab without spaces.
:::=tabs
::first tab
// some content
::second tab
// other content
:::
Enjoy