Astro Markdown sample

markdown.astro

---
import Markdown from 'astro/components/Markdown.astro';
import Layout from '../layouts/main.astro';
import ReactComponent from '../components/ReactComponent.jsx';
import PreactComponent from '../components/PreactComponent.tsx';
import VueComponent from '../components/VueComponent.vue';
import SvelteComponent from '../components/SvelteComponent.svelte';

const title = 'Astro Markdown';
const variable = 'content';
const items = ['A', 'B', 'C'];
---

<Layout>
  <Markdown>
    # Introducing {title}

    **Astro Markdown** brings native Markdown support to HTML!

    > It's inspired by [`mdx`](https://mdxjs.com/) and powered by [`remark`](https://github.com/remarkjs/remark)).

    The best part? It comes with all the Astro features you expect.

    ## Embed framework components

    <ReactComponent />
    <PeactComponent:load />
    <VueComponent:idle />
    <SvelteComponent:visible />

    ## Use Expressions

    You can use any {variable} in scope and use JavaScript for templating {items.join(', ')}

    ## Oh yeah...

    <ReactComponent>
      🤯 It's also _recursive_!

      ### Markdown can be embedded in any child component
    </ReactComponent>

  </Markdown>
</Layout>