API
Props and CSS variables
Everything you can pass to <MarkdownBlock>, and every variable you can set to restyle it.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
source | string | — | Required. The Markdown to render and to copy. |
title | string | — | Optional label in the toolbar, before the mode. |
defaultMode | 'preview' | 'markdown' | 'preview' | Which view shows first. |
height | string | number | '24rem' | Height of the scrolling body. A number is pixels. |
remarkPlugins | PluggableList | [remarkGfm] | Replaces the default remark plugins. The default is remark-gfm. |
rehypePlugins | PluggableList | external links | Replaces the default rehype plugins. The default opens external links in a new tab with rel="noopener noreferrer". |
components | Components | — | Custom element renderers, forwarded to react-markdown. |
labels | Partial<MarkdownBlockLabels> | built-in | Overrides any of preview, markdown, copy, copied, and wrap. Defaults: Preview, Markdown, Copy, Copied, Word wrap. |
className | string | — | Extra class on the root element, for theme variables or layout. |
classNames | Partial<Record<MarkdownBlockPart, string>> | — | Extra classes for root, toolbar, title, actions, button, body, preview, or source. |
Passing remarkPlugins or rehypePluginsreplaces the defaults. Include remark-gfm in your list if you still want GitHub-flavored Markdown. The types MarkdownBlockProps, MarkdownBlockLabels, and MarkdownBlockPart are exported.
CSS variables
Set these on a class and pass that class as className.
| Variable | Controls |
|---|---|
--amb-bg | Background of the block |
--amb-fg | Text color |
--amb-muted | Secondary text, such as the mode label |
--amb-border | Borders and table lines |
--amb-toolbar-bg | Toolbar and table header background |
--amb-button-bg | Button background |
--amb-button-hover | Button hover background |
--amb-accent | Pressed wrap button and focus ring |
--amb-accent-fg | Text on the accent color |
--amb-code-bg | Inline code and code block background |
--amb-link | Link color in the preview |
--amb-radius | Corner radius |
--amb-font-sans | Font for the toolbar and preview |
--amb-font-mono | Font for the raw source |
Package
- Version
- 0.1.1
- License
- MIT
- Compatibility
- React >=18, and Astro with @astrojs/react
- Module format
- ESM
- TypeScript
- Types included
- Peer dependencies
- react >=18
- Dependencies
- react-markdown ^10.1.0, rehype-external-links ^3.0.0, remark-gfm ^4.0.1
- JavaScript
- 5.7 KB (1.7 KB gzip)
- CSS
- 5.2 KB (1.4 KB gzip)
JavaScript and CSS sizes are measured from this package's built files. React, react-markdown, remark-gfm, and rehype-external-links install separately.