md
md copied to clipboard
astro-community
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.
Metadata
Owner
astro-community
Metadata
Render any Markdown content in Astro, optionally integrating with any existing configuration.