astro-md-2
v2.0.0
Published
Render any Markdown content in Astro
Maintainers
hugogresseReadme
Astro Markdown
Astro Markdown lets you render any Markdown content in Astro, optionally integrating with any existing configuration.
---
import { Markdown } from 'astro-md-2'
---
<Markdown of={`# Hi, there!` /* Renders `<h1>Hi, there!</h1>` */} />---
import { markdown } from 'astro-md-2'
---
{
/* Renders `<h1>Hi, there!</h1>` */
await markdown(`# Hi, there!`)
}Why this fork?
astro-md-2 is a maintained fork of @astropub/md by Jonathan Neal.
The original package was abandoned and is incompatible with Astro 6 (and @astrojs/markdown-remark v7) due to breaking API changes in those releases. This fork updates the integration to work with the current Astro ecosystem:
- Targets Astro 6 and
@astrojs/markdown-remark^7 - Uses Astro's built-in
HTMLStringfromastro/runtime/server/index.jsinstead of a custom implementation - Keeps the same public API so migration from
@astropub/mdis a one-line import change
Usage
Add Astro Markdown to your project.
npm install astro-md-2Use Astro Markdown in your project.
---
import { markdown } from 'astro-md-2'
---
<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 'astro-md-2'
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 'astro-md-2'
---
<Markdown.Inline of={
/* Renders `Welcome to my <em>website</em>.` */
`Welcome to my _website_.`
} />---
import { markdown } from 'astro-md-2'
---
{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.