Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/astro-community/md
Render any Markdown content in Astro, optionally integrating with any existing configuration.
https://github.com/astro-community/md
astro javascript typescript
Last synced: 3 months ago
JSON representation
Render any Markdown content in Astro, optionally integrating with any existing configuration.
- Host: GitHub
- URL: https://github.com/astro-community/md
- Owner: astro-community
- Created: 2022-08-25T03:07:13.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-01-16T21:00:51.000Z (about 1 year ago)
- Last Synced: 2024-04-25T20:55:37.544Z (9 months ago)
- Topics: astro, javascript, typescript
- Language: JavaScript
- Homepage: https://stackblitz.com/github/astro-community/md
- Size: 29.3 KB
- Stars: 53
- Watchers: 4
- Forks: 4
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- my-awesome-astro - @astropub/md - (Recommended) SSG, render markdown using settings defined in Astro config (What Do I Use... / If I want to render a string of markdown?)
README
# Astro Markdown 
**Astro Markdown** lets you render any Markdown content in **[Astro](https://astro.build)**, 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'
---
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.
```astro
---
import { Markdown } from '@astropub/md'
---
website.` */
`Welcome to my _website_.`
} />
```
```astro
---
import { markdown } from '@astropub/md'
---
{await markdown.inline(
/* Renders `Welcome to my website.` */
`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][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