{"id":15628034,"url":"https://github.com/sibiraj-s/marked-react","last_synced_at":"2025-05-16T15:07:25.074Z","repository":{"id":39671689,"uuid":"421662269","full_name":"sibiraj-s/marked-react","owner":"sibiraj-s","description":"⚛️ Render Markdown as React components","archived":false,"fork":false,"pushed_at":"2025-03-27T11:18:34.000Z","size":4157,"stargazers_count":78,"open_issues_count":5,"forks_count":14,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-04-21T09:57:58.977Z","etag":null,"topics":["markdown","markedjs","react","react-markdown"],"latest_commit_sha":null,"homepage":"https://sibiraj-s.github.io/marked-react/","language":"TypeScript","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/sibiraj-s.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["sibiraj-s"],"patreon":null,"open_collective":null,"ko_fi":null,"tidelift":null,"community_bridge":null,"liberapay":null,"issuehunt":null,"otechie":null,"lfx_crowdfunding":null,"custom":null}},"created_at":"2021-10-27T03:20:20.000Z","updated_at":"2025-04-06T07:42:12.000Z","dependencies_parsed_at":"2023-01-31T08:16:04.596Z","dependency_job_id":"3c172b29-4e7f-48ad-bf96-55a91aa179df","html_url":"https://github.com/sibiraj-s/marked-react","commit_stats":{"total_commits":233,"total_committers":9,"mean_commits":25.88888888888889,"dds":0.3390557939914163,"last_synced_commit":"9548aeadc1e1b6d91255d4e980065f8badcec079"},"previous_names":[],"tags_count":20,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibiraj-s%2Fmarked-react","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibiraj-s%2Fmarked-react/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibiraj-s%2Fmarked-react/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/sibiraj-s%2Fmarked-react/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/sibiraj-s","download_url":"https://codeload.github.com/sibiraj-s/marked-react/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252623616,"owners_count":21778285,"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":["markdown","markedjs","react","react-markdown"],"created_at":"2024-10-03T10:20:35.211Z","updated_at":"2025-05-16T15:07:25.056Z","avatar_url":"https://github.com/sibiraj-s.png","language":"TypeScript","funding_links":["https://github.com/sponsors/sibiraj-s"],"categories":[],"sub_categories":[],"readme":"# marked-react\n\n\u003e Render Markdown as React components using [marked].\n\n[![Tests](https://github.com/sibiraj-s/marked-react/actions/workflows/tests.yml/badge.svg)](https://github.com/sibiraj-s/marked-react/actions/workflows/tests.yml)\n[![Version](https://badgen.net/npm/v/marked-react)](https://npmjs.com/marked-react)\n[![License](https://badgen.net/npm/license/marked-react)](https://github.com/sibiraj-s/marked-react/blob/master/LICENSE)\n\n## TL;DR\n\n- Uses [marked](https://marked.js.org/) to parse markdown\n- Renders actual react elements instead of using `dangerouslySetInnerHTML`\n- HTML in markdown is rendered as plain text\n\n[Demo]\n\n## Installation\n\n```bash\n$ npm i marked-react\n```\n\n## Usage\n\n```js\nimport ReactDOM from 'react-dom';\nimport Markdown from 'marked-react';\n\nconst domContainer = document.getElementById('root');\nconst root = ReactDOM.createRoot(domContainer);\nroot.render(\u003cMarkdown\u003e# Hello world!\u003c/Markdown\u003e);\n```\n\n### Component Props\n\n- **value**[`string`] - Markdown content.\n- **baseURL** [`string`] - A prefix url for any relative link.\n- **openLinksInNewTab** [`boolean`] - Attribute `target=_blank` will be added to link elements\n- **langPrefix** [`string`] - A string to prefix the className in a `\u003ccode\u003e` block. Useful for syntax highlighting. Defaults to `language-`.\n- **breaks** [`boolean`] - Add `br` tag on single line breaks. Requires `gfm` to be `true`\n- **gfm** [`boolean`] - Use approved [Github Flavoured Markdown](https://github.github.com/gfm/)\n- **isInline**[`boolean`] - Parse [inline](https://marked.js.org/using_advanced#inline) markdown.\n\n## Syntax highlight code blocks\n\nAn example with [react-lowlight]\n\n```js\nimport ReactDOM from 'react-dom';\nimport Markdown from 'marked-react';\nimport Lowlight from 'react-lowlight';\nimport javascript from 'highlight.js/lib/languages/javascript';\n\nLowlight.registerLanguage('js', javascript);\n\nconst renderer = {\n  code(snippet, lang) {\n    return \u003cLowlight key={this.elementId} language={lang} value={snippet} /\u003e;\n  },\n};\n\nconst markdown = 'console.log(\"Hello world!\")';\n\nconst domContainer = document.getElementById('root');\nconst root = ReactDOM.createRoot(domContainer);\nroot.render(\u003cMarkdown value={markdown} renderer={renderer} /\u003e);\n```\n\nSome awesome options available to highlight code\n\n- [react-syntax-highlighter]\n- [react-lowlight]\n- [react-refractor]\n\n[marked]: https://marked.js.org/\n[demo]: https://sibiraj-s.github.io/marked-react/\n[react-lowlight]: https://github.com/rexxars/react-lowlight\n[react-refractor]: https://github.com/rexxars/react-refractor\n[react-syntax-highlighter]: https://github.com/react-syntax-highlighter/react-syntax-highlighter\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsibiraj-s%2Fmarked-react","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fsibiraj-s%2Fmarked-react","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fsibiraj-s%2Fmarked-react/lists"}