This Is A Core Doc

Check it out…

Each one of these headings…

Is converted into a link

On the side-bar to the right!

All you have to do…

Is put two hashes..

To make a heading..

And, it will be converted…

into a link!

Check out the “How It Works” page if you want to learn more about how to use this template.

// You can also add code blocks
// to your MDX docs!

function AstroRules() {
return (

  <h1>🚀</h1>
  <p>This is great! 
  <p>Unfortunately, this conflicts with Tailwind slightly</p>
  <p>So, just wrap each code block in a div with a few Tailwind classes:</p>
  <ul>
    <li>max-w-xs</li>
    <li>md:max-w-sm</li>
    <li>lg:max-w-md</li>
    <li>2xl:max-w-xl</li>
  </ul>

);
}

How to make a reusable code component

If remembering which classes to use sounds annoying, you can just create a reusable component to do it for you. Here’s an example of how to do that with a few extra Tailwind classes to make it worth our while:

// src/components/docs/CodeBlock.astro

<div class="max-w-xs md:max-w-sm lg:max-w-md 2xl:max-w-2xl border-2 border-primary-NOTSODARK
rounded-2xl shadow-lg shadow-primary-DARK overflow-hidden"
>
  <slot />
</div>

Ta-da! Now, you can use this component in your MDX docs like this:

<CodeBlock>
```js
function easyDocs(framework, markup, style) {
  if (framework === "Astro" && markup === "MDX" && style === "Tailwind") {
    return "Super easy documentation!";
  } else {
    return "You're making this too hard.";
  }
}
```
</CodeBlock>

Interactive Examples

This is just a taste of what you can do with MDX. You can add whole React components to your docs, and even use them to create interactive examples! This example is vanilla JS, but you can use React, Vue, Svelte, or any other framework you want.

BING

bing bong bing bing bong

BONG

bing bong bing bing bong

BANG

bang.