md
Render any Markdown content in Astro, optionally integrating with any existing configuration.
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!
Project Structure
Inside of this Astro project, you'll see the following folders and files:
/
├── demo/
│ ├── public/
│ └── src/
│ └── pages/
├── index.astro
│ └── ...etc
└── packages/
└── md/
├── package.json
└── ...etc
This project uses workspaces to develop a single package, @astropub/md.
It also includes a minimal Astro project, demo, for developing and demonstrating the component.
Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
|---|---|
npm install |
Installs dependencies |
npm run start |
Starts local dev server at localhost:3000
|
npm run build |
Build your production site to ./dist/
|
npm run serve |
Preview your build locally, before deploying |
Want to learn more? Read the Astro documentation or jump into the Astro Discord.
