remark-code-tabs
What
It's a remark plugin which create the basics for code tabs in a markdown document.
Demo
```jsx tabs=demo name=index.jsx
export default function App() {
return <div>hello world</div>;
}
```
```css tabs=demo name=style.css
div {
border: 1px solid red;
}
```↓
When
When you wont't use docusaurus' plugin because you don't want/plan to add jsx/mdx.
How
Installation
- Install the plugin with
npm i remark-code-tabs - Import the plugin with `import remarkCodeTabs from 'remark-plugin-code-tabs'
- Add to your remark plugin stack
[remarkCodeTabs]
Usage
In a markdown file, add the 2 meta tabs="" name="" to a block content such as:
```jsx tabs="demo" name="index.jsx"
export default function App() {
return <div>hello world</div>;
}
```
```css tabs="demo" name="style.css"
div {
border: 1px solid red;
}
```Styling
By default, no style will be injected, only classnames and a default html structure to help you get started. That said, you can import the plugin like this [remarkCodeTabs, { injectStyle: true }] to add a inlined <style> with the bare minimum to have a tab-like navigation, or [remarkCodeTabs, { injectStyle: 'cdn' }] yielding a link tag using unpkg.com.
You can leverage these css selectors to theme your code tabs:
.remark-code-tabs {
/* tabs wrapper */
}
.remark-code-tab {
/* tab default state */
}
.remark-code-tab:has(:checked) {
/* tab active state */
}
.remark-code-tab:not(:has(:checked)) {
/* tab inactive state */
}
.remark-code-content {
/* content wrapper */
}