https://github.com/rafgraph/react-markdown-tree-config-default
Default Config for React Markdown Tree
https://github.com/rafgraph/react-markdown-tree-config-default
Last synced: about 1 year ago
JSON representation
Default Config for React Markdown Tree
- Host: GitHub
- URL: https://github.com/rafgraph/react-markdown-tree-config-default
- Owner: rafgraph
- License: mit
- Created: 2017-05-13T18:04:07.000Z (about 9 years ago)
- Default Branch: main
- Last Pushed: 2020-10-02T02:41:09.000Z (over 5 years ago)
- Last Synced: 2025-05-07T19:09:46.334Z (about 1 year ago)
- Language: JavaScript
- Homepage: https://react-markdown-tree.rafgraph.dev
- Size: 347 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# React Markdown Tree Config Default
[Demo website](https://react-markdown-tree.rafgraph.dev)
Default config for [React Markdown Tree](https://github.com/rafgraph/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).
```shell
$ yarn add react-markdown-tree-config-default
# OR
$ npm install --save react-markdown-tree-config-default
```
```js
import React from 'react';
import { MarkdownProvider } from 'react-markdown-tree';
import markdownConfig from 'react-markdown-tree-config-default';
import App from './App';
...
```
You can also use the UMD build that's available from Unpkg:
```html
```
### 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 ``. These edits must be made before passing it in as a `prop` to ``. See [React Markdown Tree Config](https://github.com/rafgraph/react-markdown-tree#config-object) for more info on the config object structure.
```js
import React from 'react';
import markdownConfig from 'react-markdown-tree-config-default';
// to render soft breaks as line breaks
markdownConfig.renderers.Softbreak = () =>
;
// to render paragraphs with your custom styles
markdownConfig.renderers.Paragraph = props => {
const style = {
// your custom paragraph styles
}
return
{props.children}
;
};
// etc...
// add a containerProps object for default props to pass
// down to every instance of
markdownConfig.containerProps = {
// default container props
}
```