Markdown component for React using remark.
Learn markdown here and check out the demo here.
Install
- React In Markdown (In React) Update, March 2019: This article is out of date. You can find my article on the new approach, using gatsby-mdx, here. This website is made with Gatsby.js, a static site generator for React. You can look at its source here. Gatsby packages up React components, Markdown files, and other assets, creating bundles of.
- React Markdown Table Generator. Creating Markdown Tables without having to be an ascii art professional. To Run yarn install yarn start Or, npm install npm start.
npm:
Jun 17, 2020 We will run the following command to create a simplest ReactJS named react-markdown-viewer. React-markdown-viewer is just my app’s name, and this will create a new folder and configuration based on the given name, so feel free to change the name to something else you prefer. Npx create-react-app react-markdown-viewer.
Why this one?
There are other ways for markdown in React out there so why use this one?The two main reasons are that they often rely on dangerouslySetInnerHTML
orhave bugs with how they handle markdown.react-markdown
uses a syntax tree to build the virtual dom which allows forupdating only the changing DOM instead of completely overwriting.react-markdown
is 100% CommonMark (optionally GFM) compliant and hasextensions to support custom syntax.
Use
A basic hello world:
Show equivalent JSX
Here is an example using require
s, passing the markdown as a string, and howto use a plugin (remark-gfm
, which adds support for strikethrough,tables, tasklists and URLs directly):
Show equivalent JSX
API
props
children
(string
, default:'
)
Markdown to parseclassName
(string?
)
Wrap the markdown in adiv
with this class nameallowDangerousHtml
(boolean
, default:false
)
This project is safe by default and escapes HTML.UseallowDangerousHtml: true
to allow dangerous html instead.See securityskipHtml
(boolean
, default:false
)
Ignore HTML in MarkdownsourcePos
(boolean
, default:false
)
Pass a prop to all renderers with a serialized position(data-sourcepos='3:1-3:13'
)rawSourcePos
(boolean
, default:false
)
Pass a prop to all renderers with their position(sourcePosition: {start: {line: 3, column: 1}, end:…}
)includeNodeIndex
(boolean
, default:false
)
Passindex
andparentChildCount
in props to all renderersallowedTypes
(Array.<string>
, default: list of all types)
Node types to allow (can’t combine w/disallowedTypes
).All types are available atReactMarkdown.types
disallowedTypes
(Array.<string>
, default:[]
)
Node types to disallow (can’t combine w/allowedTypes
)allowNode
((node, index, parent) => boolean?
, optional)
Function called to check if a node is allowed (when truthy) or not.allowedTypes
/disallowedTypes
is used first!unwrapDisallowed
(boolean
, default:false
)
Extract (unwrap) the children of not allowed nodes.By default, whenstrong
is not allowed, it and it’s content is dropped,but withunwrapDisallowed
the node itself is dropped but the content usedlinkTarget
(string
or(url, text, title) => string
, optional)
Target to use on links (such as_blank
for<a target='_blank'…
)transformLinkUri
((uri) => string
, default:./uri-transformer.js
, optional)
URL to use for links.The default allows onlyhttp
,https
,mailto
, andtel
, and isavailable atReactMarkdown.uriTransformer
.Passnull
to allow all URLs.See securitytransformImageUri
((uri) => string
, default:./uri-transformer.js
, optional)
Same astransformLinkUri
but for imagesrenderers
(Object.<Component>
, default:{}
)
Object mapping node types to React components.Merged with the default renderers (available atReactMarkdown.renderers
).Which props are passed varies based on the nodeplugins
(Array.<Plugin>
, default:[]
)
List of remark plugins to use.See the next section for examples on how to pass options
Examples
Use a plugin
This example shows how to use a plugin.In this case, remark-gfm
, which adds support forstrikethrough, tables, tasklists and URLs directly:
Show equivalent JSX
Use a plugin with options
American megatrends laptops & desktops driver download for windows 10. This example shows how to use a plugin and give it options.To do that, use an array with the plugin at the first place, and the optionssecond.remark-gfm
has an option to allow only double tildes for strikethrough:
Show equivalent JSX
Use custom renderers (syntax highlight)
This example shows how you can overwrite the normal handling of a node bypassing a renderer.In this case, we apply syntax highlighting with the seriously super amazingreact-syntax-highlighter
by@conorhastings:
Show equivalent JSX
Use a plugin and custom renderers (math)
This example shows how a syntax extension is used to support math in markdownthat adds new node types (remark-math
), which are then handled byrenderers to use @matejmazur/react-katex
:
Show equivalent JSX
Appendix A: HTML in markdown
react-markdown
typically escapes HTML (or ignores it, with skipHtml
),because it is dangerous and defeats the purpose of this library.
However, if you are in a trusted environment (you trust the markdown), you canreact-markdown/with-html
:
Show equivalent JSX
If you want to specify options for the HTML parsing step, you can instead importthe extension directly:
Appendix B: Node types
The node types available by default are:
root
— Whole documenttext
— Text (foo
)break
— Hard break (<br>
)paragraph
— Paragraph (<p>
)emphasis
— Emphasis (<em>
)strong
— Strong (<strong>
)thematicBreak
— Horizontal rule (<hr>
)blockquote
— Block quote (<blockquote>
)link
— Link (<a>
)image
— Image (<img>
)linkReference
— Link through a reference (<a>
)imageReference
— Image through a reference (<img>
)list
— List (<ul>
or<ol>
)listItem
— List item (<li>
)definition
— Definition for a reference (not rendered)heading
— Heading (<h1>
through<h6>
)inlineCode
— Inline code (<code>
)code
— Block of code (<pre><code>
)html
— HTML node (Best-effort rendering)virtualHtml
— IfallowDangerousHtml
is not on andskipHtml
is off, anaive HTML parser is used to support basic HTMLparsedHtml
— IfallowDangerousHtml
is on,skipHtml
is off, andhtml-parser
is used, more advanced HTML is supported
With remark-gfm
, the following are also available:
delete
— Delete text (<del>
)table
— Table (<table>
)tableHead
— Table head (<thead>
)tableBody
— Table body (<tbody>
)tableRow
— Table row (<tr>
)tableCell
— Table cell (<td>
or<th>
)
Security
Use of react-markdown
is secure by default.Overwriting transformLinkUri
or transformImageUri
to something insecure orturning allowDangerousHtml
on, will open you up to XSS vectors.Furthermore, the plugins
you use and renderers
Bandrich modems driver download for windows 10. you write may be insecure.
Related
MDX
— JSX in markdownremark-gfm
— Plugin for GitHub flavored markdown support
React Markdown Blog
Contribute
See contributing.md
in remarkjs/.github
for waysto get started.See support.md
for ways to get help.
This project has a code of conduct.By interacting with this repository, organization, or community you agree toabide by its terms.
License
React Markdown Loader
MIT © Espen Hovlandsdal