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.
