Skip to content

Latest commit

 

History

History
150 lines (120 loc) · 5.24 KB

README.md

File metadata and controls

150 lines (120 loc) · 5.24 KB
Raw

Astro Markdown

Astro Markdown lets you render any Markdown content in Astro, optionally integrating with any existing configuration.

NPM Version NPM Downloads Open in StackBlitz

---
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.