[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-3304":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":16,"subscribersCount":16,"size":16,"stars1d":16,"stars7d":17,"stars30d":18,"stars90d":16,"forks30d":16,"starsTrendScore":19,"compositeScore":20,"rankGlobal":10,"rankLanguage":10,"license":21,"archived":22,"fork":22,"defaultBranch":23,"hasWiki":22,"hasPages":24,"topics":25,"createdAt":10,"pushedAt":10,"updatedAt":31,"readmeContent":32,"aiSummary":33,"trendingCount":16,"starSnapshotCount":16,"syncStatus":34,"lastSyncTime":35,"discoverSource":36},3304,"react-markdown","remarkjs\u002Freact-markdown","remarkjs","Markdown component for React","https:\u002F\u002Fremarkjs.github.io\u002Freact-markdown\u002F",null,"JavaScript",15761,923,56,1,0,13,65,8,43.9,"MIT License",false,"main",true,[26,27,28,29,30],"commonmark","gfm","markdown","react","remark","2026-06-12 02:00:48","\u003C!--\n  Notes for maintaining this document:\n\n  * update the version of the link for `commonmark-html` once in a while\n-->\n\n# react-markdown\n\n[![Build][badge-build-image]][badge-build-url]\n[![Coverage][badge-coverage-image]][badge-coverage-url]\n[![Downloads][badge-downloads-image]][badge-downloads-url]\n[![Size][badge-size-image]][badge-size-url]\n\nReact component to render markdown.\n\n## Feature highlights\n\n* [x] **[safe][section-security] by default**\n  (no `dangerouslySetInnerHTML` or XSS attacks)\n* [x] **[components][section-components]**\n  (pass your own component to use instead of `\u003Ch2>` for `## hi`)\n* [x] **[plugins][section-plugins]**\n  (many plugins you can pick and choose from)\n* [x] **[compliant][section-syntax]**\n  (100% to CommonMark, 100% to GFM with a plugin)\n\n## Contents\n\n* [What is this?](#what-is-this)\n* [When should I use this?](#when-should-i-use-this)\n* [Install](#install)\n* [Use](#use)\n* [API](#api)\n  * [`Markdown`](#markdown)\n  * [`MarkdownAsync`](#markdownasync)\n  * [`MarkdownHooks`](#markdownhooks)\n  * [`defaultUrlTransform(url)`](#defaulturltransformurl)\n  * [`AllowElement`](#allowelement)\n  * [`Components`](#components)\n  * [`ExtraProps`](#extraprops)\n  * [`HooksOptions`](#hooksoptions)\n  * [`Options`](#options)\n  * [`UrlTransform`](#urltransform)\n* [Examples](#examples)\n  * [Use a plugin](#use-a-plugin)\n  * [Use a plugin with options](#use-a-plugin-with-options)\n  * [Use custom components (syntax highlight)](#use-custom-components-syntax-highlight)\n  * [Use remark and rehype plugins (math)](#use-remark-and-rehype-plugins-math)\n* [Plugins](#plugins)\n* [Syntax](#syntax)\n* [Compatibility](#compatibility)\n* [Architecture](#architecture)\n* [Appendix A: HTML in markdown](#appendix-a-html-in-markdown)\n* [Appendix B: Components](#appendix-b-components)\n* [Appendix C: line endings in markdown (and JSX)](#appendix-c-line-endings-in-markdown-and-jsx)\n* [Security](#security)\n* [Related](#related)\n* [Contribute](#contribute)\n* [License](#license)\n\n## What is this?\n\nThis package is a [React][] component that can be given a string of markdown\nthat it’ll safely render to React elements.\nYou can pass plugins to change how markdown is transformed and pass components\nthat will be used instead of normal HTML elements.\n\n* to learn markdown, see this [cheatsheet and tutorial][commonmark-help]\n* to try out `react-markdown`, see [our demo][github-io-react-markdown]\n\n## When should I use this?\n\nThere are other ways to use markdown in React out there so why use this one?\nThe three main reasons are that they often rely on `dangerouslySetInnerHTML`,\nhave bugs with how they handle markdown, or don’t let you swap elements for\ncomponents.\n`react-markdown` builds a virtual DOM, so React only replaces what changed,\nfrom a syntax tree.\nThat’s supported because we use [unified][github-unified],\nspecifically [remark][github-remark] for markdown and [rehype][github-rehype]\nfor HTML,\nwhich are popular tools to transform content with plugins.\n\nThis package focusses on making it easy for beginners to safely use markdown in\nReact.\nWhen you’re familiar with unified, you can use a modern hooks based alternative\n[`react-remark`][github-react-remark] or [`rehype-react`][github-rehype-react]\nmanually.\nIf you instead want to use JavaScript and JSX *inside* markdown files, use\n[MDX][github-mdx].\n\n## Install\n\nThis package is [ESM only][esm].\nIn Node.js (version 16+), install with [npm][npm-install]:\n\n```sh\nnpm install react-markdown\n```\n\nIn Deno with [`esm.sh`][esmsh]:\n\n```js\nimport Markdown from 'https:\u002F\u002Fesm.sh\u002Freact-markdown@10'\n```\n\nIn browsers with [`esm.sh`][esmsh]:\n\n```html\n\u003Cscript type=\"module\">\n  import Markdown from 'https:\u002F\u002Fesm.sh\u002Freact-markdown@10?bundle'\n\u003C\u002Fscript>\n```\n\n## Use\n\nA basic hello world:\n\n```js\nimport React from 'react'\nimport {createRoot} from 'react-dom\u002Fclient'\nimport Markdown from 'react-markdown'\n\nconst markdown = '# Hi, *Pluto*!'\n\ncreateRoot(document.body).render(\u003CMarkdown>{markdown}\u003C\u002FMarkdown>)\n```\n\n\u003Cdetails>\n\u003Csummary>Show equivalent JSX\u003C\u002Fsummary>\n\n```js\n\u003Ch1>\n  Hi, \u003Cem>Pluto\u003C\u002Fem>!\n\u003C\u002Fh1>\n```\n\n\u003C\u002Fdetails>\n\nHere is an example that shows how to use a plugin\n([`remark-gfm`][github-remark-gfm],\nwhich adds support for footnotes, strikethrough, tables, tasklists and\nURLs directly):\n\n```js\nimport React from 'react'\nimport {createRoot} from 'react-dom\u002Fclient'\nimport Markdown from 'react-markdown'\nimport remarkGfm from 'remark-gfm'\n\nconst markdown = `Just a link: www.nasa.gov.`\n\ncreateRoot(document.body).render(\n  \u003CMarkdown remarkPlugins={[remarkGfm]}>{markdown}\u003C\u002FMarkdown>\n)\n```\n\n\u003Cdetails>\n\u003Csummary>Show equivalent JSX\u003C\u002Fsummary>\n\n```js\n\u003Cp>\n  Just a link: \u003Ca href=\"http:\u002F\u002Fwww.nasa.gov\">www.nasa.gov\u003C\u002Fa>.\n\u003C\u002Fp>\n```\n\n\u003C\u002Fdetails>\n\n## API\n\nThis package exports the identifiers\n[`MarkdownAsync`][api-markdown-async],\n[`MarkdownHooks`][api-markdown-hooks],\nand\n[`defaultUrlTransform`][api-default-url-transform].\nThe default export is [`Markdown`][api-markdown].\n\nIt also exports the additional [TypeScript][] types\n[`AllowElement`][api-allow-element],\n[`Components`][api-components],\n[`ExtraProps`][api-extra-props],\n[`HooksOptions`][api-hooks-options],\n[`Options`][api-options],\nand\n[`UrlTransform`][api-url-transform].\n\n### `Markdown`\n\nComponent to render markdown.\n\nThis is a synchronous component.\nWhen using async plugins,\nsee [`MarkdownAsync`][api-markdown-async] or\n[`MarkdownHooks`][api-markdown-hooks].\n\n###### Parameters\n\n* `options` ([`Options`][api-options])\n  — props\n\n###### Returns\n\nReact element (`ReactElement`).\n\n### `MarkdownAsync`\n\nComponent to render markdown with support for async plugins\nthrough async\u002Fawait.\n\nComponents returning promises are supported on the server.\nFor async support on the client,\nsee [`MarkdownHooks`][api-markdown-hooks].\n\n###### Parameters\n\n* `options` ([`Options`][api-options])\n  — props\n\n###### Returns\n\nPromise to a React element (`Promise\u003CReactElement>`).\n\n### `MarkdownHooks`\n\nComponent to render markdown with support for async plugins through hooks.\n\nThis uses `useEffect` and `useState` hooks.\nHooks run on the client and do not immediately render something.\nFor async support on the server,\nsee [`MarkdownAsync`][api-markdown-async].\n\n###### Parameters\n\n* `options` ([`Options`][api-options])\n  — props\n\n###### Returns\n\nReact node (`ReactNode`).\n\n### `defaultUrlTransform(url)`\n\nMake a URL safe.\n\nThis follows how GitHub works.\nIt allows the protocols `http`, `https`, `irc`, `ircs`, `mailto`, and `xmpp`,\nand URLs relative to the current protocol (such as `\u002Fsomething`).\n\n###### Parameters\n\n* `url` (`string`)\n  — URL\n\n###### Returns\n\nSafe URL (`string`).\n\n### `AllowElement`\n\nFilter elements (TypeScript type).\n\n###### Parameters\n\n* `node` ([`Element` from `hast`][github-hast-element])\n  — element to check\n* `index` (`number | undefined`)\n  — index of `element` in `parent`\n* `parent` ([`Node` from `hast`][github-hast-nodes])\n  — parent of `element`\n\n###### Returns\n\nWhether to allow `element` (`boolean`, optional).\n\n### `Components`\n\nMap tag names to components (TypeScript type).\n\n###### Type\n\n```ts\nimport type {ExtraProps} from 'react-markdown'\nimport type {ComponentProps, ElementType} from 'react'\n\ntype Components = {\n  [Key in Extract\u003CElementType, string>]?: ElementType\u003CComponentProps\u003CKey> & ExtraProps>\n}\n```\n\n### `ExtraProps`\n\nExtra fields we pass to components (TypeScript type).\n\n###### Fields\n\n* `node` ([`Element` from `hast`][github-hast-element], optional)\n  — original node\n\n### `HooksOptions`\n\nConfiguration for [`MarkdownHooks`][api-markdown-hooks] (TypeScript type);\nextends the regular [`Options`][api-options] with a `fallback` prop.\n\n###### Extends\n\n[`Options`][api-options].\n\n###### Fields\n\n* `fallback` (`ReactNode`, optional)\n  — content to render while the processor processing the markdown\n\n### `Options`\n\nConfiguration (TypeScript type).\n\n###### Fields\n\n* `allowElement` ([`AllowElement`][api-allow-element], optional)\n  — filter elements;\n  `allowedElements` \u002F `disallowedElements` is used first\n* `allowedElements` (`Array\u003Cstring>`, default: all tag names)\n  — tag names to allow;\n  cannot combine w\u002F `disallowedElements`\n* `children` (`string`, optional)\n  — markdown\n* `components` ([`Components`][api-components], optional)\n  — map tag names to components\n* `disallowedElements` (`Array\u003Cstring>`, default: `[]`)\n  — tag names to disallow;\n  cannot combine w\u002F `allowedElements`\n* `rehypePlugins` (`Array\u003CPlugin>`, optional)\n  — list of [rehype plugins][github-rehype-plugins] to use\n* `remarkPlugins` (`Array\u003CPlugin>`, optional)\n  — list of [remark plugins][github-remark-plugins] to use\n* `remarkRehypeOptions`\n  ([`Options` from `remark-rehype`][github-remark-rehype-options],\n  optional)\n  — options to pass through to `remark-rehype`\n* `skipHtml` (`boolean`, default: `false`)\n  — ignore HTML in markdown completely\n* `unwrapDisallowed` (`boolean`, default: `false`)\n  — extract (unwrap) what’s in disallowed elements;\n  normally when say `strong` is not allowed, it and it’s children are dropped,\n  with `unwrapDisallowed` the element itself is replaced by its children\n* `urlTransform` ([`UrlTransform`][api-url-transform], default:\n  [`defaultUrlTransform`][api-default-url-transform])\n  — change URLs\n\n### `UrlTransform`\n\nTransform URLs (TypeScript type).\n\n###### Parameters\n\n* `url` (`string`)\n  — URL\n* `key` (`string`, example: `'href'`)\n  — property name\n* `node` ([`Element` from `hast`][github-hast-element])\n  — element to check\n\n###### Returns\n\nTransformed URL (`string`, optional).\n\n## Examples\n\n### Use a plugin\n\nThis example shows how to use a remark plugin.\nIn this case, [`remark-gfm`][github-remark-gfm],\nwhich adds support for strikethrough, tables, tasklists and URLs directly:\n\n```js\nimport React from 'react'\nimport {createRoot} from 'react-dom\u002Fclient'\nimport Markdown from 'react-markdown'\nimport remarkGfm from 'remark-gfm'\n\nconst markdown = `A paragraph with *emphasis* and **strong importance**.\n\n> A block quote with ~strikethrough~ and a URL: https:\u002F\u002Freactjs.org.\n\n* Lists\n* [ ] todo\n* [x] done\n\nA table:\n\n| a | b |\n| - | - |\n`\n\ncreateRoot(document.body).render(\n  \u003CMarkdown remarkPlugins={[remarkGfm]}>{markdown}\u003C\u002FMarkdown>\n)\n```\n\n\u003Cdetails>\n\u003Csummary>Show equivalent JSX\u003C\u002Fsummary>\n\n```js\n\u003C>\n  \u003Cp>\n    A paragraph with \u003Cem>emphasis\u003C\u002Fem> and \u003Cstrong>strong importance\u003C\u002Fstrong>.\n  \u003C\u002Fp>\n  \u003Cblockquote>\n    \u003Cp>\n      A block quote with \u003Cdel>strikethrough\u003C\u002Fdel> and a URL:{' '}\n      \u003Ca href=\"https:\u002F\u002Freactjs.org\">https:\u002F\u002Freactjs.org\u003C\u002Fa>.\n    \u003C\u002Fp>\n  \u003C\u002Fblockquote>\n  \u003Cul className=\"contains-task-list\">\n    \u003Cli>Lists\u003C\u002Fli>\n    \u003Cli className=\"task-list-item\">\n      \u003Cinput type=\"checkbox\" disabled \u002F> todo\n    \u003C\u002Fli>\n    \u003Cli className=\"task-list-item\">\n      \u003Cinput type=\"checkbox\" disabled checked \u002F> done\n    \u003C\u002Fli>\n  \u003C\u002Ful>\n  \u003Cp>A table:\u003C\u002Fp>\n  \u003Ctable>\n    \u003Cthead>\n      \u003Ctr>\n        \u003Cth>a\u003C\u002Fth>\n        \u003Cth>b\u003C\u002Fth>\n      \u003C\u002Ftr>\n    \u003C\u002Fthead>\n  \u003C\u002Ftable>\n\u003C\u002F>\n```\n\n\u003C\u002Fdetails>\n\n### Use a plugin with options\n\nThis example shows how to use a plugin and give it options.\nTo do that, use an array with the plugin at the first place, and the options\nsecond.\n[`remark-gfm`][github-remark-gfm] has an option to allow only double tildes for\nstrikethrough:\n\n```js\nimport React from 'react'\nimport {createRoot} from 'react-dom\u002Fclient'\nimport Markdown from 'react-markdown'\nimport remarkGfm from 'remark-gfm'\n\nconst markdown = 'This ~is not~ strikethrough, but ~~this is~~!'\n\ncreateRoot(document.body).render(\n  \u003CMarkdown remarkPlugins={[[remarkGfm, {singleTilde: false}]]}>\n    {markdown}\n  \u003C\u002FMarkdown>\n)\n```\n\n\u003Cdetails>\n\u003Csummary>Show equivalent JSX\u003C\u002Fsummary>\n\n```js\n\u003Cp>\n  This ~is not~ strikethrough, but \u003Cdel>this is\u003C\u002Fdel>!\n\u003C\u002Fp>\n```\n\n\u003C\u002Fdetails>\n\n### Use custom components (syntax highlight)\n\nThis example shows how you can overwrite the normal handling of an element by\npassing a component.\nIn this case, we apply syntax highlighting with the seriously super amazing\n[`react-syntax-highlighter`][github-react-syntax-highlighter] by\n[**@conorhastings**][github-conorhastings]:\n\n\u003C!-- To do: currently broken on actual ESM; let’s find an alternative? -->\n\n```js\nimport React from 'react'\nimport {createRoot} from 'react-dom\u002Fclient'\nimport Markdown from 'react-markdown'\nimport {Prism as SyntaxHighlighter} from 'react-syntax-highlighter'\nimport {dark} from 'react-syntax-highlighter\u002Fdist\u002Fesm\u002Fstyles\u002Fprism'\n\n\u002F\u002F Did you know you can use tildes instead of backticks for code in markdown? ✨\nconst markdown = `Here is some JavaScript code:\n\n~~~js\nconsole.log('It works!')\n~~~\n`\n\ncreateRoot(document.body).render(\n  \u003CMarkdown\n    children={markdown}\n    components={{\n      code(props) {\n        const {children, className, node, ...rest} = props\n        const match = \u002Flanguage-(\\w+)\u002F.exec(className || '')\n        return match ? (\n          \u003CSyntaxHighlighter\n            {...rest}\n            PreTag=\"div\"\n            children={String(children).replace(\u002F\\n$\u002F, '')}\n            language={match[1]}\n            style={dark}\n          \u002F>\n        ) : (\n          \u003Ccode {...rest} className={className}>\n            {children}\n          \u003C\u002Fcode>\n        )\n      }\n    }}\n  \u002F>\n)\n```\n\n\u003Cdetails>\n\u003Csummary>Show equivalent JSX\u003C\u002Fsummary>\n\n```js\n\u003C>\n  \u003Cp>Here is some JavaScript code:\u003C\u002Fp>\n  \u003Cpre>\n    \u003CSyntaxHighlighter language=\"js\" style={dark} PreTag=\"div\" children=\"console.log('It works!')\" \u002F>\n  \u003C\u002Fpre>\n\u003C\u002F>\n```\n\n\u003C\u002Fdetails>\n\n### Use remark and rehype plugins (math)\n\nThis example shows how a syntax extension\n(through [`remark-math`][github-remark-math])\nis used to support math in markdown, and a transform plugin\n([`rehype-katex`][github-rehype-katex]) to render that math.\n\n```js\nimport React from 'react'\nimport {createRoot} from 'react-dom\u002Fclient'\nimport Markdown from 'react-markdown'\nimport rehypeKatex from 'rehype-katex'\nimport remarkMath from 'remark-math'\nimport 'katex\u002Fdist\u002Fkatex.min.css' \u002F\u002F `rehype-katex` does not import the CSS for you\n\nconst markdown = `The lift coefficient ($C_L$) is a dimensionless coefficient.`\n\ncreateRoot(document.body).render(\n  \u003CMarkdown remarkPlugins={[remarkMath]} rehypePlugins={[rehypeKatex]}>\n    {markdown}\n  \u003C\u002FMarkdown>\n)\n```\n\n\u003Cdetails>\n\u003Csummary>Show equivalent JSX\u003C\u002Fsummary>\n\n```js\n\u003Cp>\n  The lift coefficient (\n  \u003Cspan className=\"katex\">\n    \u003Cspan className=\"katex-mathml\">\n      \u003Cmath xmlns=\"http:\u002F\u002Fwww.w3.org\u002F1998\u002FMath\u002FMathML\">{\u002F* … *\u002F}\u003C\u002Fmath>\n    \u003C\u002Fspan>\n    \u003Cspan className=\"katex-html\" aria-hidden=\"true\">\n      {\u002F* … *\u002F}\n    \u003C\u002Fspan>\n  \u003C\u002Fspan>\n  ) is a dimensionless coefficient.\n\u003C\u002Fp>\n```\n\n\u003C\u002Fdetails>\n\n## Plugins\n\nWe use [unified][github-unified],\nspecifically [remark][github-remark] for markdown and\n[rehype][github-rehype] for HTML,\nwhich are tools to transform content with plugins.\nHere are three good ways to find plugins:\n\n* [`awesome-remark`][github-awesome-remark] and\n  [`awesome-rehype`][github-awesome-rehype]\n  — selection of the most awesome projects\n* [List of remark plugins][github-remark-plugins] and\n  [list of rehype plugins][github-rehype-plugins]\n  — list of all plugins\n* [`remark-plugin`][github-topic-remark-plugin] and\n  [`rehype-plugin`][github-topic-rehype-plugin] topics\n  — any tagged repo on GitHub\n\n## Syntax\n\n`react-markdown` follows CommonMark, which standardizes the differences between\nmarkdown implementations, by default.\nSome syntax extensions are supported through plugins.\n\nWe use [`micromark`][github-micromark] under the hood for our parsing.\nSee its documentation for more information on markdown, CommonMark, and\nextensions.\n\n## Compatibility\n\nProjects maintained by the unified collective are compatible with maintained\nversions of Node.js.\n\nWhen we cut a new major release, we drop support for unmaintained versions of\nNode.\nThis means we try to keep the current release line, `react-markdown@10`,\ncompatible with Node.js 16.\n\nThey work in all modern browsers (essentially: everything not IE 11).\nYou can use a bundler (such as esbuild, webpack, or Rollup) to use this package\nin your project, and use its options (or plugins) to add support for legacy\nbrowsers.\n\n## Architecture\n\n\u003Cpre>\u003Ccode>                                                           react-markdown\n         +----------------------------------------------------------------------------------------------------------------+\n         |                                                                                                                |\n         |  +----------+        +----------------+        +---------------+       +----------------+       +------------+ |\n         |  |          |        |                |        |               |       |                |       |            | |\n\u003Ca href=\"https:\u002F\u002Fcommonmark.org\">markdown\u003C\u002Fa>-+->+  \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fremarkjs\u002Fremark\">remark\u003C\u002Fa>  +-\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsyntax-tree\u002Fmdast\">mdast\u003C\u002Fa>->+ \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fremarkjs\u002Fremark\u002Fblob\u002Fmain\u002Fdoc\u002Fplugins.md\">remark plugins\u003C\u002Fa> +-\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsyntax-tree\u002Fmdast\">mdast\u003C\u002Fa>->+ \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fremarkjs\u002Fremark-rehype\">remark-rehype\u003C\u002Fa> +-\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsyntax-tree\u002Fhast\">hast\u003C\u002Fa>->+ \u003Ca href=\"https:\u002F\u002Fgithub.com\u002Frehypejs\u002Frehype\u002Fblob\u002Fmain\u002Fdoc\u002Fplugins.md\">rehype plugins\u003C\u002Fa> +-\u003Ca href=\"https:\u002F\u002Fgithub.com\u002Fsyntax-tree\u002Fhast\">hast\u003C\u002Fa>->+ \u003Ca href=\"#appendix-b-components\">components\u003C\u002Fa> +-+->react elements\n         |  |          |        |                |        |               |       |                |       |            | |\n         |  +----------+        +----------------+        +---------------+       +----------------+       +------------+ |\n         |                                                                                                                |\n         +----------------------------------------------------------------------------------------------------------------+\n\u003C\u002Fcode>\u003C\u002Fpre>\n\nTo understand what this project does, it’s important to first understand what\nunified does: please read through the [`unifiedjs\u002Funified`][github-unified]\nreadme\n(the part until you hit the API section is required reading).\n\n`react-markdown` is a unified pipeline — wrapped so that most folks don’t need\nto directly interact with unified.\nThe processor goes through these steps:\n\n* parse markdown to mdast (markdown syntax tree)\n* transform through remark (markdown ecosystem)\n* transform mdast to hast (HTML syntax tree)\n* transform through rehype (HTML ecosystem)\n* render hast to React with components\n\n## Appendix A: HTML in markdown\n\n`react-markdown` typically escapes HTML (or ignores it, with `skipHtml`)\nbecause it is dangerous and defeats the purpose of this library.\n\nHowever, if you are in a trusted environment (you trust the markdown), and\ncan spare the bundle size (±60kb minzipped), then you can use\n[`rehype-raw`][github-rehype-raw]:\n\n```js\nimport React from 'react'\nimport {createRoot} from 'react-dom\u002Fclient'\nimport Markdown from 'react-markdown'\nimport rehypeRaw from 'rehype-raw'\n\nconst markdown = `\u003Cdiv class=\"note\">\n\nSome *emphasis* and \u003Cstrong>strong\u003C\u002Fstrong>!\n\n\u003C\u002Fdiv>`\n\ncreateRoot(document.body).render(\n  \u003CMarkdown rehypePlugins={[rehypeRaw]}>{markdown}\u003C\u002FMarkdown>\n)\n```\n\n\u003Cdetails>\n\u003Csummary>Show equivalent JSX\u003C\u002Fsummary>\n\n```js\n\u003Cdiv className=\"note\">\n  \u003Cp>\n    Some \u003Cem>emphasis\u003C\u002Fem> and \u003Cstrong>strong\u003C\u002Fstrong>!\n  \u003C\u002Fp>\n\u003C\u002Fdiv>\n```\n\n\u003C\u002Fdetails>\n\n**Note**: HTML in markdown is still bound by how [HTML works in\nCommonMark][commonmark-html].\nMake sure to use blank lines around block-level HTML that again contains\nmarkdown!\n\n## Appendix B: Components\n\nYou can also change the things that come from markdown:\n\n```js\n\u003CMarkdown\n  components={{\n    \u002F\u002F Map `h1` (`# heading`) to use `h2`s.\n    h1: 'h2',\n    \u002F\u002F Rewrite `em`s (`*like so*`) to `i` with a red foreground color.\n    em(props) {\n      const {node, ...rest} = props\n      return \u003Ci style={{color: 'red'}} {...rest} \u002F>\n    }\n  }}\n\u002F>\n```\n\nThe keys in components are HTML equivalents for the things you write with\nmarkdown (such as `h1` for `# heading`).\nNormally, in markdown, those are: `a`, `blockquote`, `br`, `code`, `em`, `h1`,\n`h2`, `h3`, `h4`, `h5`, `h6`, `hr`, `img`, `li`, `ol`, `p`, `pre`, `strong`, and\n`ul`.\nWith [`remark-gfm`][github-remark-gfm],\nyou can also use `del`, `input`, `table`, `tbody`, `td`, `th`, `thead`, and `tr`.\nOther remark or rehype plugins that add support for new constructs will also\nwork with `react-markdown`.\n\nThe props that are passed are what you probably would expect: an `a` (link) will\nget `href` (and `title`) props, and `img` (image) an `src`, `alt` and `title`,\netc.\n\nEvery component will receive a `node`.\nThis is the original [`Element` from `hast`][github-hast-element] element being\nturned into a React element.\n\n## Appendix C: line endings in markdown (and JSX)\n\nYou might have trouble with how line endings work in markdown and JSX.\nWe recommend the following, which solves all line ending problems:\n\n```js\n\u002F\u002F If you write actual markdown in your code, put your markdown in a variable;\n\u002F\u002F **do not indent markdown**:\nconst markdown = `\n# This is perfect!\n`\n\n\u002F\u002F Pass the value as an expression as an only child:\nconst result = \u003CMarkdown>{markdown}\u003C\u002FMarkdown>\n```\n\n👆 That works.\nRead on for what doesn’t and why that is.\n\nYou might try to write markdown directly in your JSX and find that it **does\nnot** work:\n\n```js\n\u003CMarkdown>\n  # Hi\n\n  This is **not** a paragraph.\n\u003C\u002FMarkdown>\n```\n\nThe is because in JSX the whitespace (including line endings) is collapsed to\na single space.\nSo the above example is equivalent to:\n\n```js\n\u003CMarkdown> # Hi This is **not** a paragraph. \u003C\u002FMarkdown>\n```\n\nInstead, to pass markdown to `Markdown`, you can use an expression:\nwith a template literal:\n\n```js\n\u003CMarkdown>{`\n# Hi\n\nThis is a paragraph.\n`}\u003C\u002FMarkdown>\n```\n\nTemplate literals have another potential problem, because they keep whitespace\n(including indentation) inside them.\nThat means that the following **does not** turn into a heading:\n\n```js\n\u003CMarkdown>{`\n    # This is **not** a heading, it’s an indented code block\n`}\u003C\u002FMarkdown>\n```\n\n## Security\n\nUse of `react-markdown` is secure by default.\nOverwriting `urlTransform` to something insecure will open you up to XSS\nvectors.\nFurthermore, the `remarkPlugins`, `rehypePlugins`, and `components` you use may\nbe insecure.\n\nTo make sure the content is completely safe, even after what plugins do,\nuse [`rehype-sanitize`][github-rehype-sanitize].\nIt lets you define your own schema of what is and isn’t allowed.\n\n## Related\n\n* [`MDX`][github-mdx]\n  — JSX *in* markdown\n* [`remark-gfm`][github-remark-gfm]\n  — add support for GitHub flavored markdown support\n* [`react-remark`][github-react-remark]\n  — hook based alternative\n* [`rehype-react`][github-rehype-react]\n  — turn HTML into React elements\n\n## Contribute\n\nSee [`contributing.md`][health-contributing] in [`remarkjs\u002F.github`][health]\nfor ways to get started.\nSee [`support.md`][health-support] for ways to get help.\n\nThis project has a [code of conduct][health-coc].\nBy interacting with this repository, organization, or community you agree to\nabide by its terms.\n\n## License\n\n[MIT][file-license] © [Espen Hovlandsdal][author]\n\n[api-allow-element]: #allowelement\n\n[api-components]: #components\n\n[api-default-url-transform]: #defaulturltransformurl\n\n[api-extra-props]: #extraprops\n\n[api-hooks-options]: #hooksoptions\n\n[api-markdown]: #markdown\n\n[api-markdown-async]: #markdownasync\n\n[api-markdown-hooks]: #markdownhooks\n\n[api-options]: #options\n\n[api-url-transform]: #urltransform\n\n[author]: https:\u002F\u002Fespen.codes\u002F\n\n[badge-build-image]: https:\u002F\u002Fgithub.com\u002Fremarkjs\u002Freact-markdown\u002Fworkflows\u002Fmain\u002Fbadge.svg\n\n[badge-build-url]: https:\u002F\u002Fgithub.com\u002Fremarkjs\u002Freact-markdown\u002Factions\n\n[badge-coverage-image]: https:\u002F\u002Fimg.shields.io\u002Fcodecov\u002Fc\u002Fgithub\u002Fremarkjs\u002Freact-markdown.svg\n\n[badge-coverage-url]: https:\u002F\u002Fcodecov.io\u002Fgithub\u002Fremarkjs\u002Freact-markdown\n\n[badge-downloads-image]: https:\u002F\u002Fimg.shields.io\u002Fnpm\u002Fdm\u002Freact-markdown.svg\n\n[badge-downloads-url]: https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Freact-markdown\n\n[badge-size-image]: https:\u002F\u002Fimg.shields.io\u002Fbundlejs\u002Fsize\u002Freact-markdown\n\n[badge-size-url]: https:\u002F\u002Fbundlejs.com\u002F?q=react-markdown\n\n[commonmark-help]: https:\u002F\u002Fcommonmark.org\u002Fhelp\u002F\n\n[commonmark-html]: https:\u002F\u002Fspec.commonmark.org\u002F0.31.2\u002F#html-blocks\n\n[esm]: https:\u002F\u002Fgist.github.com\u002Fsindresorhus\u002Fa39789f98801d908bbc7ff3ecc99d99c\n\n[esmsh]: https:\u002F\u002Fesm.sh\n\n[file-license]: license\n\n[github-awesome-rehype]: https:\u002F\u002Fgithub.com\u002Frehypejs\u002Fawesome-rehype\n\n[github-awesome-remark]: https:\u002F\u002Fgithub.com\u002Fremarkjs\u002Fawesome-remark\n\n[github-conorhastings]: https:\u002F\u002Fgithub.com\u002Fconorhastings\n\n[github-hast-element]: https:\u002F\u002Fgithub.com\u002Fsyntax-tree\u002Fhast#element\n\n[github-hast-nodes]: https:\u002F\u002Fgithub.com\u002Fsyntax-tree\u002Fhast#nodes\n\n[github-io-react-markdown]: https:\u002F\u002Fremarkjs.github.io\u002Freact-markdown\u002F\n\n[github-mdx]: https:\u002F\u002Fgithub.com\u002Fmdx-js\u002Fmdx\u002F\n\n[github-micromark]: https:\u002F\u002Fgithub.com\u002Fmicromark\u002Fmicromark\n\n[github-react-remark]: https:\u002F\u002Fgithub.com\u002Fremarkjs\u002Freact-remark\n\n[github-react-syntax-highlighter]: https:\u002F\u002Fgithub.com\u002Freact-syntax-highlighter\u002Freact-syntax-highlighter\n\n[github-rehype]: https:\u002F\u002Fgithub.com\u002Frehypejs\u002Frehype\n\n[github-rehype-katex]: https:\u002F\u002Fgithub.com\u002Fremarkjs\u002Fremark-math\u002Ftree\u002Fmain\u002Fpackages\u002Frehype-katex\n\n[github-rehype-plugins]: https:\u002F\u002Fgithub.com\u002Frehypejs\u002Frehype\u002Fblob\u002Fmain\u002Fdoc\u002Fplugins.md#list-of-plugins\n\n[github-rehype-raw]: https:\u002F\u002Fgithub.com\u002Frehypejs\u002Frehype-raw\n\n[github-rehype-react]: https:\u002F\u002Fgithub.com\u002Frehypejs\u002Frehype-react\n\n[github-rehype-sanitize]: https:\u002F\u002Fgithub.com\u002Frehypejs\u002Frehype-sanitize\n\n[github-remark]: https:\u002F\u002Fgithub.com\u002Fremarkjs\u002Fremark\n\n[github-remark-gfm]: https:\u002F\u002Fgithub.com\u002Fremarkjs\u002Fremark-gfm\n\n[github-remark-math]: https:\u002F\u002Fgithub.com\u002Fremarkjs\u002Fremark-math\n\n[github-remark-plugins]: https:\u002F\u002Fgithub.com\u002Fremarkjs\u002Fremark\u002Fblob\u002Fmain\u002Fdoc\u002Fplugins.md#list-of-plugins\n\n[github-remark-rehype-options]: https:\u002F\u002Fgithub.com\u002Fremarkjs\u002Fremark-rehype#options\n\n[github-topic-rehype-plugin]: https:\u002F\u002Fgithub.com\u002Ftopics\u002Frehype-plugin\n\n[github-topic-remark-plugin]: https:\u002F\u002Fgithub.com\u002Ftopics\u002Fremark-plugin\n\n[github-unified]: https:\u002F\u002Fgithub.com\u002Funifiedjs\u002Funified\n\n[health]: https:\u002F\u002Fgithub.com\u002Fremarkjs\u002F.github\n\n[health-coc]: https:\u002F\u002Fgithub.com\u002Fremarkjs\u002F.github\u002Fblob\u002Fmain\u002Fcode-of-conduct.md\n\n[health-contributing]: https:\u002F\u002Fgithub.com\u002Fremarkjs\u002F.github\u002Fblob\u002Fmain\u002Fcontributing.md\n\n[health-support]: https:\u002F\u002Fgithub.com\u002Fremarkjs\u002F.github\u002Fblob\u002Fmain\u002Fsupport.md\n\n[npm-install]: https:\u002F\u002Fdocs.npmjs.com\u002Fcli\u002Finstall\n\n[react]: http:\u002F\u002Freactjs.org\n\n[section-components]: #appendix-b-components\n\n[section-plugins]: #plugins\n\n[section-security]: #security\n\n[section-syntax]: #syntax\n\n[typescript]: https:\u002F\u002Fwww.typescriptlang.org\n","react-markdown 是一个用于在 React 应用中渲染 Markdown 内容的组件。它默认安全，不使用 `dangerouslySetInnerHTML`，防止 XSS 攻击；支持自定义组件替换标准 HTML 标签，例如可以用自定义组件替代 `\u003Ch2>`；并且提供了丰富的插件供选择，能够100%兼容 CommonMark 和 GitHub Flavored Markdown (GFM)。适用于需要在React项目中展示Markdown格式文档但又要求较高安全性与灵活性的场景，如博客平台、文档系统等。",2,"2026-06-11 02:53:27","top_language"]