Astro Markdown 
Astro Markdown lets you render arbitrary 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.
91 Jan 2, 2023
6 Nov 22, 2022
14 Dec 19, 2022
21 Nov 6, 2022
43 Jan 6, 2023
12 Oct 10, 2022
25 Dec 20, 2022
17 Nov 17, 2022
10 Mar 1, 2022
8 Apr 4, 2022