Markdown
Turns Markdown into a styled, safe page of text.
SourcePackage @weft-js/warpPlayground
Preview
tsx
import { Markdown } from '@weft-js/warp'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 @weft-js/warpUsage
tsx
import { Markdown } from '@weft-js/warp'<Markdown source={NOTES} />Tables
Use source with a Markdown table to show rows and columns.
tsx
import { Markdown } from '@weft-js/warp'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 '@weft-js/warp'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 '@weft-js/warp'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 '@weft-js/warp'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 '@weft-js/warp'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
Playground
import { Markdown } from '@weft-js/warp'<Markdown source={source} />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. |