Markdown - React Docx

Renders Markdown text from data, such as descriptions typed by field staff or clauses kept in a CMS.

<Markdown>{finding.description}</Markdown>

Props

Prop	Type	Description
`children`	`string`	The Markdown source
`headingOffset`	`number`	Added to heading levels, so `#` becomes H2 with `1`. Default `0`
`className`	`string`	Tailwind classes for the paragraphs, list items and quotes

Supported syntax

Markdown	Result
`# Title` to `###### Title`	Headings
Blank line	New paragraph
Line break inside a paragraph	BreakLine
`- item`, `* item`, `1. item`	Lists, nested by indentation
`> quote`	Indented italic paragraph
`---`	Horizontal rule
`bold`, `italic`, `~~strike~~`	Formatted text
`code`	Monospaced text
`[text](https://…)`	Link

HTML is not interpreted: tags stay as text, so data cannot inject markup. Tables and images in Markdown are not supported; use the components for those.

Inside a template

Clauses usually sit under a template heading. headingOffset keeps their headings below it:

<H1>Terms</H1>
<Markdown headingOffset={1} className="text-justify">
  {clauses.privacy}
</Markdown>