Markdown

Open in Playground

Renders GitHub-style Markdown with the library own components and no Markdown dependency: headings, paragraphs, **bold**, *italic*, ~~strikethrough~~, links, images, ordered, unordered and nested lists, task lists (- [x]), quotes, tables with alignment, rules and fenced code (shown with CodeDisplay, so it is colored by language and can be copied). Pass the source as children.

Safe for text you do not control. HTML in the source stays literal text (<script> is just text), and links and images whose URL is unsafe (javascript:, data: and other schemes) are shown as plain text; only http, https, mailto, tel, relative paths and #anchors pass. Nothing is ever injected as HTML.

Minion report

Kevin found 3 bananas. They are heavy small, have no seeds, and a peel shows inline.

What the Minions got

  • Bananas, banana bread and banana smoothies
  • Lists, including nested ones:
    • a nested banana
    • another one
  • Peel the bananas
  • Steal the moon
  1. Wake up
  2. Eat a banana

Bello! Quotes are indented with a rule, and can hold any Markdown.

MinionMoodBananas
Kevinhappy4
Stuarthungry1
jsx
import { Markdown } from 'xedonium' export default () => <Markdown>{'# Bello!'}</Markdown>

Read the docs, or press the key. <b>HTML</b> stays plain text.

Links. Links starting with / go through linkComponent / linkProp (for react-router: linkComponent={Link} linkProp="to"), the rest are plain <a>. Change which links count as internal with isInternalLink, and open external ones in a new tab with openLinksInNewTab (they always get rel="noopener noreferrer"). Headings get an id from their text so #anchor links work; turn it off with headingIds={false}.

Try it below: edit the Markdown on the left and the result updates.

Result

Minion editor

Type Markdown here and see it rendered beside it.

  • bold, italic, code
  • your own text

Home is an internal link, Example is external.

<script>alert('plain text, never run')</script>

Props

  • childrenstring
    Default: ''

    The Markdown source.

  • linkComponentElementType
    Default: 'a'

    Component used for internal links (a router link).

  • linkPropstring
    Default: 'href'

    Name of its destination prop (to for react-router).

  • isInternalLink(href: string) => boolean
    Default: starts with /

    Which links go through linkComponent. By default paths starting with / (not //).

  • openLinksInNewTabboolean
    Default: false

    Open external links in a new tab (they always get rel="noopener noreferrer").

  • headingIdsboolean
    Default: true

    Give headings an id made from their text, for #anchor links.

  • highlighter(code, language) => Segment[][]

    Your own tokenizer for fenced code (see CodeDisplay).

  • inlineboolean
    Default: false

    Render only the inline subset (emphasis, strong, strikethrough, code, links, images) with no block wrapper; a span when className is set.

  • classNamestring
    Default: ''

    Extra classes for the root element.