You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 7-8.RSVP →
Socket
Socket
Sign inDemoInstall

remark-docusaurus-tabs

Package Overview
Dependencies
2
Maintainers
1
Versions
2
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

remark-docusaurus-tabs

remark plugin to transform standard markdown headings to docusaurus(v2) JSX tabs.


Version published
Maintainers
1
Created

Readme

Source

remark-docusaurus-tabs

[remark][https://github.com/remarkjs/remark] plugin to transform standard markdown headings to [docusaurus][https://github.com/facebook/docusaurus] (v2) JSX tabs.

This package expects [remark-slug][https://github.com/remarkjs/remark-slug] to be used before it, which is already the case for docusaurus, but may need to be considered if used outside docusaurus.

Install

npm install remark-docusaurus-tabs

Then add it to your site's docusaurus.config.js plugins option:

module.exports = {
  // ...
  plugins: ['remark-docusaurus-tabs'],
};

Use

Annotate the markdown with a tabs comment prior to the first tab heading. For example, the following markdown file:

<!--tabs-->
# Apple

This is an apple 🍎

# Orange

This is an orange 🍊

# Banana

This is a banana 🍌

will be transformed to:

import Tabs from '@theme/Tabs';

import TabItem from '@theme/TabItem';

<Tabs defaultValue="apple" values={[{label:"Apple",value:"apple"},{label:"Orange",value:"orange"},{label:"Banana",value:"banana"}]}>

<TabItem value="apple">

This is an apple 🍎

</TabItem>

<TabItem value="orange">

This is an orange 🍊

</TabItem>

<TabItem value="banana">

This is a banana 🍌

</TabItem>

</Tabs>

The first heading after the tabs comment becomes the first tab, with the other tabs taken from the headings with the same level as the first heading. The tab body is the content between the headings. The tabs finish when there is a higher level heading, or may be terminated explicitly with a /tabs comment.

License

[MIT][LICENSE] © [Paul McClean][author]

Keywords

FAQs

Package last updated on 25 Nov 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc