Astro Markdown

Astro Markdown lets you render any Markdown content in Astro, optionally integrating with any existing configuration.

---
import { Markdown } from '@astropub/md'
---
<Markdown of={`# Hi, there!` /* Renders `<h1>Hi, there!</h1>` */} />

---
import { markdown } from '@astropub/md'
---
{
  /* Renders `<h1>Hi, there!</h1>` */
  await markdown(`# Hi, there!`)
}

Usage

Add Astro Markdown to your project.

npm install @astropub/md

Use Astro Markdown in your project.

---
import { markdown } from '@astropub/md'
---
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>Astro</title>
  </head>
  <body>
    {await markdown(
`# Hi, there!

Welcome to my _website_.`
    )}
  </body>
</html>

Optionally, integrate Astro Markdown with your existing Astro configuration.

// astro.config.js
import { defineConfig } from 'astro/config'
import markdownIntegration from '@astropub/md'

export default defineConfig({
  integrations: [
    markdownIntegration(),
  ],
  markdown: {
    remarkPlugins: [],
    rehypePlugins: [],
    // syntaxHighlight: 'shiki'
    // syntaxHighlight: 'prism'
  }
})

Now markdown configuration is automatically applied to <Markdown> components and markdown() functions.

Use markdown.inline() or <Markdown.Inline> to handle short strings of text without the surrounding paragraph.

---
import { Markdown } from '@astropub/md'
---
<Markdown.Inline of={
  /* Renders `Welcome to my <em>website</em>.` */
  `Welcome to my _website_.`
} />

---
import { markdown } from '@astropub/md'
---
{await markdown.inline(
  /* Renders `Welcome to my <em>website</em>.` */
  `Welcome to my _website_.`
)}

Enjoy!

Want to learn more? Read the Astro documentation or jump into the Astro Discord.