@astropub/md
v1.0.0TypeScript
Render any Markdown content in Astro
0/weekUpdated 1 years agoCC0-1.0Unpacked: 10.0 KB
Published by Jonathan Neal
npm install @astropub/mdAstro Markdown 
Astro Markdown lets you render any Markdown content in Astro, optionally integrating with any existing configuration.
[![NPM Version][npm-img]][npm-url]
[![NPM Downloads][download-img]][download-url]
[![Open in StackBlitz][stackblitz-img]][stackblitz-url]
``astro
---
import { Markdown } from '@astropub/md'
--- / Renders Hi, there!
/} />`
`astro
---
import { markdown } from '@astropub/md'
---
{
/ Renders
Hi, there!
/
await markdown(# Hi, there!)
}
`Usage
Add Astro Markdown to your project.
shell
npm install @astropub/md
`Use Astro Markdown in your project.
astro
---
import { markdown } from '@astropub/md'
---
Astro
{await markdown(
# Hi, there!Welcome to my _website_.
)}
Optionally, integrate Astro Markdown with your existing Astro configuration.
`js
// 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 components and markdown() functions.
Use markdown.inline() or to handle short strings of text without the surrounding paragraph.
`astroWelcome to my website.
---
import { Markdown } from '@astropub/md'
--- /Welcome to my _website_.
} />
`astroWelcome to my website.
---
import { markdown } from '@astropub/md'
---
{await markdown.inline(
/ Renders /Welcome to my _website_.
)}
Enjoy!
---
Want to learn more?
Read the [Astro documentation][docs-url] or jump into the [Astro Discord][chat-url].
[chat-url]: https://astro.build/chat
[docs-url]: https://github.com/withastro/astro
[npm-img]: https://img.shields.io/npm/v/@astropub/md?color=%23444&label=&labelColor=%23CB0000&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjE1MCAxNTAgNDAwIDQwMCIgZmlsbD0iI0ZGRiI+PHBhdGggZD0iTTE1MCA1NTBoMjAwVjI1MGgxMDB2MzAwaDEwMFYxNTBIMTUweiIvPjwvc3ZnPg==&style=for-the-badge
[npm-url]: https://www.npmjs.com/package/@astropub/md
[stackblitz-img]: https://img.shields.io/badge/-Open%20in%20Stackblitz-%231374EF?color=%23444&labelColor=%231374EF&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjEwIDggMTIgMTgiIGhlaWdodD0iMTgiIGZpbGw9IiNGRkYiPjxwYXRoIGQ9Ik0xMCAxNy42aDUuMmwtMyA3LjRMMjIgMTQuNGgtNS4ybDMtNy40TDEwIDE3LjZaIi8+PC9zdmc+&style=for-the-badge
[stackblitz-url]: https://stackblitz.com/github/astro-community/md
[bundlejs-img]: https://img.shields.io/badge/dynamic/json?url=https://bundlejs.com/api?q=@astropub/md&query=size.totalCompressedSize&color=%23444&labelColor=%233B82F6&label=&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA3MDAgNzAwIiBmaWxsPSIjRkZGIj4KCTxwYXRoIGQ9Ik0xNDYgMkExNzEgMTcxIDAgMCAwIDMgMTM5bC0yIDExdjQwMmwyIDExYzE1IDcyIDcxIDEyNSAxNDMgMTM2bDIwOSAxIDE5OS0xIDktMmM3MC0xNiAxMTktNjYgMTM0LTEzNWwyLTEwVjE1MGwtMi0xMkExNzEgMTcxIDAgMCAwIDU2MiAzbC0xMC0yLTE5OS0xQzE4NyAwIDE1MyAwIDE0NiAyem0xODEgMjUxdjM2bDctM2MxMy02IDMzLTkgNTAtNyA0MSA1IDcwIDM0IDgwIDc4IDIgMTIgMiA0MSAwIDUzLTUgMjItMTMgMzgtMjcgNTJhODIgODIgMCAwIDEtNjMgMjZjLTE1IDAtMTkgMC0yNS0yLTEwLTItMTctNi0yNC0xMGwtNS0zdjExaC00NVYyMTdoNTJ2MzZ6bTI5IDcxYy0yMCAzLTMyIDE5LTM1IDQ4LTMgMjUgMyA0OCAxNCA2MCA1IDYgMTMgMTAgMjMgMTEgMjUgNCA0NC05IDUxLTM2bDMtMTljMC0xNy0xLTI3LTctMzktOS0xOS0yNi0yOC00OS0yNXoiLz4KPC9zdmc+&style=for-the-badge
[bundlejs-url]: https://bundlejs.com/?bundle&q=@astropub/md
[download-url]: https://www.npmjs.com/package/@astropub/md
[download-img]: https://img.shields.io/badge/dynamic/json?url=https://api.npmjs.org/downloads/point/last-week/@astropub/md&query=downloads&label=⇓+week&color=%23444&labelColor=%23EEd100&style=for-the-badge