mdx / General

Is it possible to create custom markup with MDX? I would like to create a tabs component and be able to have some special markup like: "#Tabs - First Tab - Second Tab". I understand that it is possible to use the MdxProvider to customise the components for already existing tags, but cannot find any info on parsing new custom html tags.

Is it possible to create custom markup with MDX? I would like to create a tabs component and be able to have some special markup like: "#Tabs - First Tab - Second Tab". I understand that it is possible to use the MdxProvider to customise the components for already existing tags, but cannot find any info on parsing new custom html tags.

mdx/General · January 17, 2019 at 4:34pm

Is it possible to create custom markup with MDX? I would like to create a tabs component and be able to have some special markup like: "#Tabs - First Tab - Second Tab". I understand that it is possible to use the MdxProvider to customise the components for already existing tags, but cannot find any info on parsing new custom html tags.

mdx / General · January 17, 2019 at 4:34pm (Edited 2 months ago)

January 17, 2019 at 11:34pm

MDX specifically handles JSX syntax, so something like:

<tab>First Tab</tab>
<tab>Second Tab</tab>

Would work out of the box.

The example provided:

# Tabs - First Tab - Second Tab

Is extending markdown syntax, a remark plugin would be the best option. Checkout this guide for how to extend remark using plugins: https://unified.js.org/create-a-plugin.html And visit the heading nodes in the tree https://astexplorer.net/#/gist/f0d16c9efc8e6f2f877a384ac3bc8291/fbce1f51ac5c60b95086e81eb84fa70d91ee4aed

  • reply
  • like