React Mark

Configurable Markdown Components in React. Make your own components to do custom things like to:

• Add line numbers and syntax highlighting to pre tags.

• Transform absolute and relative link paths on a tags.
• Add anchor links to all h1 and h2 tags.

Install

npm install react-mark --save

Usage

import React from 'react'; import Markdown from 'react-mark';  class Component extends React.Component {   render() {     return <Markdown text="# React Mark"/>;   } }  class OtherComponent extends React.Component {   render() {     return (       <Markdown replace={{ pre: CodeWithNumbers }}>         import React from 'react';         import Markdown from 'react-mark';       </Markdown>     );   } }

props

text, children

Type: string

The Markdown to be rendered in React components.

replace

Type: obj

To wrap markdown with a custom component, pass an object down with the element name as the key and the component as the value. Tag names include: a blockquote code del em header hr img li list p pre ref span strong ul.