{"id":17187103,"url":"https://github.com/mlaursen/react-marked-renderer","last_synced_at":"2025-04-13T18:38:07.229Z","repository":{"id":36990217,"uuid":"270868940","full_name":"mlaursen/react-marked-renderer","owner":"mlaursen","description":"A low-level component wrapper for https://github.com/markedjs/marked that renders as React components instead of strings.","archived":false,"fork":false,"pushed_at":"2023-12-01T06:21:30.000Z","size":1282,"stargazers_count":8,"open_issues_count":3,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2024-04-14T01:00:47.254Z","etag":null,"topics":["markdown","markdown-renderer","marked","react","react-components","typescript"],"latest_commit_sha":null,"homepage":"https://react-marked-renderer.vercel.app","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/mlaursen.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}},"created_at":"2020-06-09T00:58:26.000Z","updated_at":"2023-12-14T22:59:04.000Z","dependencies_parsed_at":"2023-12-06T05:44:04.138Z","dependency_job_id":null,"html_url":"https://github.com/mlaursen/react-marked-renderer","commit_stats":{"total_commits":159,"total_committers":3,"mean_commits":53.0,"dds":0.08805031446540879,"last_synced_commit":"5492629245da7a0e7abea66cc796c9cdbc9a6b6a"},"previous_names":[],"tags_count":15,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlaursen%2Freact-marked-renderer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlaursen%2Freact-marked-renderer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlaursen%2Freact-marked-renderer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mlaursen%2Freact-marked-renderer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mlaursen","download_url":"https://codeload.github.com/mlaursen/react-marked-renderer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248662408,"owners_count":21141569,"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","markdown-renderer","marked","react","react-components","typescript"],"created_at":"2024-10-15T01:05:22.030Z","updated_at":"2025-04-13T18:38:07.206Z","avatar_url":"https://github.com/mlaursen.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Marked Renderer [![license](https://img.shields.io/npm/l/react-md)](https://github.com/mlaursen/react-marked-renderer/blob/main/LICENSE) [![codecov](https://codecov.io/gh/mlaursen/react-marked-renderer/branch/main/graph/badge.svg?token=R4XGTOIVU0)](https://codecov.io/gh/mlaursen/react-marked-renderer) [![Main](https://github.com/mlaursen/react-marked-renderer/actions/workflows/main.yml/badge.svg)](https://github.com/mlaursen/react-marked-renderer/actions/workflows/main.yml) [![npm](https://img.shields.io/npm/v/react-marked-renderer)](https://www.npmjs.com/package/react-marked-renderer) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-marked-renderer)\n\nA low-level component wrapper for [marked](https://github.com/markedjs/marked)\nthat renders as [React](https://reactjs.org) components instead of strings.\n\nCheck out the [playground website](https://react-marked-renderer.vercel.app/) to\nsee how markdown is rendered with the default renderers or custom renderers and\nthe\n[API Documentation](https://react-marked-renderer.vercel.app/tsdocs/index.html).\n\n## Installation\n\n```sh\nnpm install react react-marked-renderer\n```\n\nOr with [yarn](https://yarnpkg.com):\n\n```sh\nyarn add react react-marked-renderer\n```\n\n## Features\n\n- render almost everything that is available by GitHub flavored markdown out of\n  the box\n  - the only exception is rendering `html` code itself\n- allow custom renderers to implement complex components if desired or custom\n  styles\n- allows code highlighting\n  - allow code language aliases/resolution with `getLanguage`\n  - in the browser with `highlightElement` (can be asynchronous)\n  - in node environments with `highlightCode` (synchronous only)\n\n\u003e Note: Since the [marked.lexer](https://marked.js.org/using_pro#lexer) does not\n\u003e support custom [extensions](https://marked.js.org/using_pro#extensions),\n\u003e neither does this library. I would like to support this feature in the future.\n\n## Usage\n\nThe main component within this library is the `Markdown` component.\n\n\u003e Check out the [Markdown tests](./src/__tests__/Markdown.tsx) and\n\u003e [Markdown snapshots](./src/__tests__/__snapshots__/Markdown.tsx.snap) to see\n\u003e the default functionality.\n\n### Simple Example\n\n```tsx\nimport { render } from \"react-dom\";\nimport { Markdown } from \"react-marked-renderer\";\n\nconst markdown = `# Heading 1\n\nThis is some text that will be rendered as a paragraph.\n\nMarkdown defaults to the github-flavored markdown.\n`;\n\nrender(\u003cMarkdown markdown={markdown} /\u003e, document.getElementById(\"root\"));\n```\n\n### Custom Renderers\n\nSince the default renderers add no styles, you can define your own renderers to\nadd styles or additional functionality.\n\n```tsx\nimport { useState } from \"react\";\nimport { render } from \"react-dom\";\nimport {\n  DEFAULT_MARKDOWN_RENDERERS,\n  ListRenderer,\n  Markdown,\n  Renderers,\n  getTokensText,\n} from \"react-marked-renderer\";\nimport { BrowserRouter as Router, Link } from \"react-router-dom\";\n\nconst renderers: Renderers = {\n  ...DEFAULT_MARKDOWN_RENDERERS,\n  link: function CustomLink({ href, title, children }) {\n    // make links use html5 history and not cause reloads\n    return (\n      \u003cLink to={href} title={title}\u003e\n        {children}\n      \u003c/Link\u003e\n    );\n  },\n\n  blockquote: function Blockquote({ children }) {\n    return \u003cblockquote className=\"custom\"\u003e{children}\u003c/blockquote\u003e;\n  },\n\n  task: function Task({ defaultChecked, tokens, children }) {\n    // hooks can be used in these renderers\n    const id = useSluggedId(`${getTokensText(tokens)}-task`);\n    const [checked, setChecked] = useState(defaultChecked);\n    return (\n      \u003cli className=\"task-item\"\u003e\n        \u003cinput\n          id={id}\n          checked={checked}\n          onChange={(event) =\u003e setChecked(event.currentTarget.checked)}\n        /\u003e\n        \u003clabel htmlFor={d}\u003e{children}\u003c/label\u003e\n      \u003c/li\u003e\n    );\n  },\n\n  list: function List(props) {\n    // can get the current renderers as well\n    const renderers = useRenderers();\n    const { listitem: ListItem } = renderers;\n    const item = \u003cListItem\u003eContent\u003c/ListItem\u003e;\n\n    // or just return the default renderer\n    return \u003cListRenderer {...props} /\u003e;\n  },\n};\n\nrender(\n  \u003cRouter\u003e\n    \u003cMarkdown markdown={markdown} renderers={renderers} /\u003e\n  \u003c/Router\u003e,\n  document.getElementById(\"root\")\n);\n```\n\n### PrismJS Code Highlighting (Browser)\n\nTo be able to highlight code in the browser, provide a `highlightElement`\nfunction that will modify a `\u003ccode\u003e` element to be highlighted:\n\n```tsx\nimport { render } from \"react-dom\";\nimport {\n  DEFAULT_MARKDOWN_RENDERERS,\n  Markdown,\n  Renderers,\n} from \"react-marked-renderer\";\nimport Prism from \"prismjs\";\n// import prism theme/components or use `babel-plugin-prismjs`\n\nconst renderers: Renderers = {\n  ...DEFAULT_MARKDOWN_RENDERERS,\n  codespan: function CodeSpan({ children }) {\n    // just so it gets some prism styling\n    return \u003ccode className=\"language-none\"\u003e{children}\u003c/code\u003e;\n  },\n};\n\nrender(\n  \u003cMarkdown\n    markdown={markdown}\n    renderers={renderers}\n    highlightElement={Prism.highlightElement}\n  /\u003e,\n  document.getElementById(\"root\")\n);\n```\n\n### PrismJS Code Highlighting (Node and Browser)\n\nIf you want to highlight code in a node environment or allow the code to be\nhighlighted for SSR and in the browser, provide a `highlightCode` function:\n\n```tsx\nimport { render } from \"react-dom\";\nimport {\n  DEFAULT_MARKDOWN_RENDERERS,\n  DangerouslyHighlight,\n  GetCodeLanguage,\n  Markdown,\n  Renderers,\n} from \"react-marked-renderer\";\nimport Prism from \"prismjs\";\n\nconst renderers: Renderers = {\n  ...DEFAULT_MARKDOWN_RENDERERS,\n  codespan: function CodeSpan({ children }) {\n    // just so it gets some prism styling\n    return \u003ccode className=\"language-none\"\u003e{children}\u003c/code\u003e;\n  },\n};\n\nconst getLanguage: GetCodeLanguage = (lang, _rawCode) =\u003e {\n  // allow aliases\n  lang = lang === \"sh\" ? \"shell\" : lang;\n\n  // if the Prism doesn't support the language, default to nothing instead\n  // of crashing\n  if (!Prism.languages[lang]) {\n    return \"none\";\n  }\n\n  return lang;\n};\n\nconst highlightCode: DangerouslyHighlightCode = (code, lang) =\u003e\n  Prism.highlight(code, Prism.languages[lang], lang);\n\nrender(\n  \u003cMarkdown\n    markdown={markdown}\n    renderers={renderers}\n    getLanguage={getLanguage}\n    highlightCode={highlightCode}\n  /\u003e,\n  document.getElementById(\"root\")\n);\n```\n\n## What's the use-case?\n\nThis library mostly came up since I like to write documentation sites in\nmarkdown, but also apply custom styles as well as linking to other documentation\npages using html5 history (no full page reloads).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlaursen%2Freact-marked-renderer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmlaursen%2Freact-marked-renderer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmlaursen%2Freact-marked-renderer/lists"}