astro-markdown-block

v0.1.1MITAstro + React

Markdown people can read and copy.

A Markdown block for Astro and React. Show the rendered version, flip to the source, and copy it in one click.

Get startedOpen playground
README.mdPreview

astro-markdown-block

A Markdown block for Astro and React. Readers switch between the rendered preview and the raw source, turn word wrap on or off, and copy the Markdown exactly as written.

Install

npm install astro-markdown-block
npx astro add react

Astro needs the React integration. The buttons need a client:* directive.

What you get

  • Preview and raw source in one block
  • Copy, with a fallback when the Clipboard API is missing
  • GitHub-flavored Markdown
  • CSS variables for light and dark mode

Try the Markdown button and the copy icon.

What you get

  • Preview and source

    Flip between rendered Markdown and the raw text.

  • One-click copy

    Copies the original Markdown, not the rendered HTML.

  • GitHub Flavored Markdown

    Tables, task lists, and strikethrough work out of the box.

  • Themeable

    CSS variables, with light and dark built in.

  • Extensible

    Bring your own remark and rehype plugins and renderers.

  • Astro and React

    Works in .astro, .mdx, and any React 18+ app.

Install

Three steps. In a React app, skip step 2.

1 Add the package

npm install astro-markdown-block

2 Add React to Astro

The buttons are a React island, so Astro needs React.

npx astro add react

3 Use it

Import the component and its CSS, then pass Markdown as source. ?raw loads a .md file as a string. client:visible turns on the buttons when the block scrolls into view.

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

<MarkdownBlock client:visible title="Notes" source={notes} />
import { MarkdownBlock } from 'astro-markdown-block'
import 'astro-markdown-block/styles.css'
import notes from './notes.md?raw'

<MarkdownBlock client:visible title="Notes" source={notes} />
import { MarkdownBlock } from 'astro-markdown-block'
import 'astro-markdown-block/styles.css'

const notes = `# Notes

Read the diff first, then report one problem at a time.`

export function Notes() {
  return <MarkdownBlock title="Notes" source={notes} />
}

To restyle it, set --amb-* variables on a class and pass it as className. See the custom theme example and the variable list.

Where next