README
React Markdown Tree Config Default
Default config for React Markdown Tree for zero setup markdown styling with syntax highlighting (the markdown style is loosely based on GitHub's style, and the syntax highlighting is based on Atom One Light).
$ yarn add react-markdown-tree-config-default
# OR
$ npm install --save react-markdown-tree-config-default
import React from 'react';
import { MarkdownProvider } from 'react-markdown-tree';
import markdownConfig from 'react-markdown-tree-config-default';
import App from './App';
...
<MarkdownProvider config={markdownConfig}>
<App />
</MarkdownProvider>
You can also use the UMD build that's available from Unpkg:
<!-- Available at window.ReactMarkdownTreeConfigDefault -->
<script src="https://unpkg.com/react-markdown-tree-config-default/dist/react-markdown-tree-config-default.min.js"></script>
Editing the Config
The imported markdownConfig
is a mutable POJO, so you can overwrite any of the renderers by assigning it to your custom renderer (a ReactComponent). This is useful if overall you like the style but want to slightly tweak how it renders. You can also add a containerProps
object for default props to pass down to every instance of <Markdown>
. These edits must be made before passing it in as a prop
to <MarkdownProvider>
. See React Markdown Tree Config for more info on the config object structure.
import React from 'react';
import markdownConfig from 'react-markdown-tree-config-default';
// to render soft breaks as line breaks
markdownConfig.renderers.Softbreak = () => <br />;
// to render paragraphs with your custom styles
markdownConfig.renderers.Paragraph = props => {
const style = {
// your custom paragraph styles
}
return <p style={style}>{props.children}</p>;
};
// etc...
// add a containerProps object for default props to pass
// down to every instance of <Markdown>
markdownConfig.containerProps = {
// default container props
}