Syntax for Tabs and TabItems in .md (not .mdx)

[goldenratio]

Hey,
thanks for this awesome tool.
is it possible to show Tabs and TabItem in markdown (without .mdx)? I couldn't find this info in doc.

Any help is appreciated.

[HiDeoo]

👋 Thanks for the feedback and the question.

<Tabs> and <TabsItem> are only available as components in Starlight. As documented, these components only work by importing them into your MDX files and then rendering it as a JSX tag. Such components are not supported in Markdown files.

[kemo-1]

can we add this using rehype and remark plugins? like this here

https://plugin-md-enhance.vuejs.press/guide/content/tabs.html#usage

[kemo-1]

in starlight we already have notes like

:::note

this is a note

:::

this should work when adding plugins for it right?

:::tabs#fruit

@tab apple#apple

Apple

@tab banana#banana

Banana

:::

[delucis]

While theoretically possible, it is not that simple and would lead to us maintaining a lot of extra code. For :::note etc. we already maintain two separate ways of rendering these because the rehype approach needs a different way of generating HTML than a component approach. That’s not too bad in that case because the component is relatively simple, but for tabs with all of the additional script logic associated, it’s probably not practical.

I’d recommend using MDX (or Markdoc) for content with components.

[kemo-1]

yub i have used mdoc with tabs before it works smoothly

just wanted to know if that approach was possible or practical thank you for your help👍✨

[kemo-1]

the current limitation with markdoc i saw is that my remark plugins don't work in it

the problem is solved by using mdx

[kemo-1]

Use web components

When you trust the people that write your markdown you can have allow html on in your markdown

<tabs>
<tab-element>
tab 1
</teb-element>

<tab-element>
tab 2
</teb-element>
</tabs>

I think you can turn any Astro components into a web component and use it in your md files