Markdown Viewer component
Props
export interface MarkdownViewerProps {
input: string;
escapeHtml: boolean;
disallowedTypes?: string[];
unwrapDisallowed?: boolean;
}
input
The Markdown source to parse (required)escapeHtml
Setting tofalse
will cause HTML to be rendered. Be aware that setting this tofalse
might cause security issues if the input is user-generated. Use at your own risk. (default:true
).disallowedTypes
- Defines which types of nodes should be disallowed (not rendered).unwrapDisallowed
- boolean Setting totrue
will try to extract/unwrap the children of disallowed nodes. For instance, if disallowingStrong
, the default behaviour is to simply skip the text within the strong altogether, while the behaviour some might want is to simply have the text returned without the strong wrapping it. (default:false
)
Node types
The node types available are the following, use these names in disallowedTypes
:
root
- Root container element that contains the rendered markdowntext
- Text rendered inside of other elements, such as paragraphsbreak
- Hard-break (<br>
)paragraph
- Paragraph (<p>
)emphasis
- Emphasis (<em>
)strong
- Strong/bold (<strong>
)thematicBreak
- Horizontal rule / thematic break (<hr>
)blockquote
- Block quote (<blockquote>
)delete
- Deleted/strike-through (<del>
)link
- Link (<a>
)image
- Image (<img>
)linkReference
- Link (through a reference) (<a>
)imageReference
- Image (through a reference) (<img>
)table
- Table (<table>
)tableHead
- Table head (<thead>
)tableBody
- Table body (<tbody>
)tableRow
- Table row (<tr>
)tableCell
- Table cell (<td>
/<th>
)list
- List (<ul>
/<ol>
)listItem
- List item (<li>
)definition
- Definition (not rendered by default)heading
- Heading (<h1>
-<h6>
)inlineCode
- Inline code (<code>
)code
- Block of code (<pre><code>
)html
- HTML node (Best-effort rendering)virtualHtml
- When not using the HTML parser plugin, a cheap and dirty approach to supporting simple HTML elements without a complete parser.parsedHtml
- When using the HTML parser plugin, HTML parsed to a React element.
Note: Disallowing a node will also prevent the rendering of any children of that node, unless the
unwrapDisallowed
option is set to true
. E.g., disallowing a paragraph will not render its
children text nodes.