{"id":19533956,"url":"https://github.com/rafgraph/react-markdown-tree-config-default","last_synced_at":"2025-05-07T19:09:51.351Z","repository":{"id":57334290,"uuid":"91193490","full_name":"rafgraph/react-markdown-tree-config-default","owner":"rafgraph","description":"Default Config for React Markdown Tree","archived":false,"fork":false,"pushed_at":"2020-10-02T02:41:09.000Z","size":355,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-05-07T19:09:46.334Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://react-markdown-tree.rafgraph.dev","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/rafgraph.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-05-13T18:04:07.000Z","updated_at":"2024-08-15T09:25:39.000Z","dependencies_parsed_at":"2022-08-31T16:51:51.692Z","dependency_job_id":null,"html_url":"https://github.com/rafgraph/react-markdown-tree-config-default","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafgraph%2Freact-markdown-tree-config-default","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafgraph%2Freact-markdown-tree-config-default/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafgraph%2Freact-markdown-tree-config-default/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/rafgraph%2Freact-markdown-tree-config-default/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/rafgraph","download_url":"https://codeload.github.com/rafgraph/react-markdown-tree-config-default/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252940934,"owners_count":21828769,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-11T02:11:25.925Z","updated_at":"2025-05-07T19:09:51.263Z","avatar_url":"https://github.com/rafgraph.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Markdown Tree Config Default\n\n[Demo website](https://react-markdown-tree.rafgraph.dev)\n\nDefault 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).\n\n```shell\n$ yarn add react-markdown-tree-config-default\n# OR\n$ npm install --save react-markdown-tree-config-default\n```\n\n```js\nimport React from 'react';\nimport { MarkdownProvider } from 'react-markdown-tree';\nimport markdownConfig from 'react-markdown-tree-config-default';\nimport App from './App';\n...\n\u003cMarkdownProvider config={markdownConfig}\u003e\n  \u003cApp /\u003e\n\u003c/MarkdownProvider\u003e\n```\n\nYou can also use the UMD build that's available from Unpkg:\n```html\n\u003c!-- Available at window.ReactMarkdownTreeConfigDefault --\u003e\n\u003cscript src=\"https://unpkg.com/react-markdown-tree-config-default/dist/react-markdown-tree-config-default.min.js\"\u003e\u003c/script\u003e\n```\n\n### Editing the Config\n\nThe 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 `\u003cMarkdown\u003e`. These edits must be made before passing it in as a `prop` to `\u003cMarkdownProvider\u003e`. See [React Markdown Tree Config](https://github.com/rafgraph/react-markdown-tree#config-object) for more info on the config object structure.\n```js\nimport React from 'react';\nimport markdownConfig from 'react-markdown-tree-config-default';\n\n// to render soft breaks as line breaks\nmarkdownConfig.renderers.Softbreak = () =\u003e \u003cbr /\u003e;\n\n// to render paragraphs with your custom styles\nmarkdownConfig.renderers.Paragraph = props =\u003e {\n  const style = {\n    // your custom paragraph styles\n  }\n  return \u003cp style={style}\u003e{props.children}\u003c/p\u003e;\n};\n\n// etc...\n\n// add a containerProps object for default props to pass\n// down to every instance of \u003cMarkdown\u003e\nmarkdownConfig.containerProps = {\n  // default container props\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafgraph%2Freact-markdown-tree-config-default","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Frafgraph%2Freact-markdown-tree-config-default","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Frafgraph%2Freact-markdown-tree-config-default/lists"}