Markdown
Turns Markdown into a styled, safe page of text.
Preview
tsx
import { Markdown } from '@kerf-js/veneer'export function Notes() { return ( <Markdown source={NOTES} /> )}const NOTES = `## October releasePreviews now **stay up** for 30 days after a ` + `branch is deleted. See the [guide](/docs) for more.- Lower stale window on \`edge-cache\`- Apple Pay in \`checkout\`- Seat changes are prorated> Requests are up 8.6% on September.`Installation
npm install @kerf-js/veneerTry it
Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.
Live preview
Controls
Codeupdates as you change the controls
import { Markdown } from '@kerf-js/veneer'<Markdown source={source} />Usage
tsx
import { Markdown } from '@kerf-js/veneer'<Markdown source={NOTES} />Tables
Use source with a Markdown table to show rows and columns.
tsx
import { Markdown } from '@kerf-js/veneer'export function Table() { return ( <Markdown source={TABLE} /> )}const TABLE = `| Region | Requests | Share || --- | ---: | ---: || eu-west | 34.2M | 40% || us-east | 24.8M | 29% || ap-south | 12.1M | 14% |`Code
Use source with a fenced block to show code inside Markdown text.
tsx
import { Markdown } from '@kerf-js/veneer'export function Code() { return ( <Markdown source={SNIPPET} /> )}const SNIPPET = `Add this to your project:\`\`\`tsexport default { name: 'storefront' }\`\`\``Links in a new tab
linkTarget="_blank" for text from outside your app.
tsx
import { Markdown } from '@kerf-js/veneer'export function NewTab() { return ( <Markdown linkTarget="_blank" source={ 'Read the [status page](https://example.com) ' + 'before you deploy.' } /> )}Raw HTML
It is escaped and shows as text, so user content can't run a script.
tsx
import { Markdown } from '@kerf-js/veneer'export function Safe() { return ( <Markdown source={ 'Raw HTML shows as text: ' + '<script>alert("no")</script>' } /> )}A review comment
Use source to render a comment as formatted text inside a card.
tsx
import { Card, Markdown } from '@kerf-js/veneer'export function Comment() { return ( <Card eyebrow="Priya Raman, on d-4821"> <Markdown source={COMMENT} /> </Card> )}const COMMENT = 'Looks good. Two things before we ship:' + `1. **Rename** the flag to \`use_edge_images\`2. Add a test for the _empty cart_`When to use
Use it for
- Text people or a server wrote in Markdown
Reach for something else
- MarkdownEditor, when people need to write it too
- Text, when it is your own copy, with no formatting
Accessibility
- Start from the right heading level for where it sits, as the source sets the outline.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
source | string | — | The Markdown. |
linkTarget | "_self" | "_blank" | — | Where links open. |