astro-markdown-block

Playground

Try it with your Markdown

Edit the Markdown and the block updates as you type. Copy the code when you're happy with it.

Example
defaultMode
Theme
Result
NotesPreview

Project notes

Keep notes in Markdown so they can be read here and copied into a changelog, an issue, or a prompt.

Before the tag

  1. Run the tests.
  2. Bump the version in package.json.
  3. Write what changed for users.
npm install astro-markdown-block

Code

---
import { MarkdownBlock } from 'astro-markdown-block'
import 'astro-markdown-block/styles.css'
import source from './notes.md?raw'
---

<MarkdownBlock
  client:visible
  title="Notes"
  source={source}
/>

Save your Markdown as notes.md next to the page. In a React app, drop client:visible and pass the string as source.