Markdown component for React using remark.

Learn markdown here and check out the demo here.

Install

Changes are automatically rendered as you type. Implements GitHub Flavored Markdown; Renders actual, 'native' React DOM elements; Allows you to escape or skip HTML (try toggling the checkboxes above).

npm:

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.

Markdown Editor for React. A simple markdown editor with preview, implemented with React.js and TypeScript. This React Component aims to provide a simple Markdown editor with syntax highlighting support. This is based on `textarea` encapsulation, so it does not depend on any modern code editors such as Acs, CodeMirror, Monaco etc. A JavaScript library for building user interfaces. Take the Tutorial. React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. An external Markdown library, to convert the. A JavaScript library for building user interfaces.

Use

A basic hello world:

Here is an example using requires, passing the markdown as a string, and howto use a plugin (remark-gfm, which adds support for strikethrough,tables, tasklists and URLs directly):

API

props

• children (string, default: ')
  Markdown to parse
• className (string?)
  Wrap the markdown in a div with this class name
• skipHtml (boolean, default: false)
  Ignore HTML in Markdown completely
• sourcePos (boolean, default: false)
  Pass a prop to all components with a serialized position(data-sourcepos='3:1-3:13')
• rawSourcePos (boolean, default: false)
  Pass a prop to all components with their position(sourcePosition: {start: {line: 3, column: 1}, end:…})
• includeElementIndex (boolean, default: false)
  Pass the index (number of elements before it) and siblingCount (numberof elements in parent) as props to all components
• allowedElements (Array.<string>, default: undefined)
  Tag names to allow (can’t combine w/ disallowedElements).By default all elements are allowed
• disallowedElements (Array.<string>, default: undefined)
  Tag names to disallow (can’t combine w/ allowedElements).By default no elements are disallowed
• allowElement ((element, index, parent) => boolean?, optional)
  Function called to check if an element is allowed (when truthy) or not.allowedElements / disallowedElements is used first!
• unwrapDisallowed (boolean, default: false)
  Extract (unwrap) the children of not allowed elements.By default, when strong is not allowed, it and it’s children is dropped,but with unwrapDisallowed the element itself is dropped but the childrenused
• linkTarget (string or (href, children, title) => string, optional)
  Target to use on links (such as _blank for <a target='_blank'…)
• transformLinkUri ((href, children, title) => string, default:./uri-transformer.js, optional)
  URL to use for links.The default allows only http, https, mailto, and tel, and isavailable at ReactMarkdown.uriTransformer.Pass null to allow all URLs.See security
• transformImageUri ((src, alt, title) => string, default:./uri-transformer.js, optional)
  Same as transformLinkUri but for images
• components (Object.<string, Component>, default: {})
  Object mapping tag names to React components
• remarkPlugins (Array.<Plugin>, default: [])
  List of remark plugins to use.See the next section for examples on how to pass options
• rehypePlugins (Array.<Plugin>, default: [])
  List of rehype 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 remark plugin.In this case, remark-gfm, which adds support forstrikethrough, tables, tasklists and URLs directly:

Use a plugin with options

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:

React Markdown Editor

Use custom components (syntax highlight)

This example shows how you can overwrite the normal handling of an element bypassing a component.In this case, we apply syntax highlighting with the seriously super amazingreact-syntax-highlighter by@conorhastings:

Use remark and rehype plugins (math)

This example shows how a syntax extension (through remark-math)is used to support math in markdown, and a transform plugin(rehype-katex) to render that math.

Architecture

relevant links: markdown, remark, mdast, remark plugins, remark-rehype, hast, rehype plugins, components

To understand what this project does, it’s very important to first understandwhat unified does: please read through the unifiedjs/unifiedreadme (the part until you hit the API section is required reading).

react-markdown is a unified pipeline — wrapped so that most folks don’t need todirectly interact with unified. The processor goes through these steps:

• Parse Markdown to mdast (markdown syntax tree)
• Transform through remark (markdown ecosystem)
• Transform mdast to hast (HTML syntax tree)
• Transform through rehype (HTML ecosystem)
• Render hast to react with components

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.

React Js Markdown On Youtube

However, if you are in a trusted environment (you trust the markdown), andcan spare the bundle size (±60kb minzipped), then you can userehype-raw:

How To Create A ReactJS App That Renders The Markdown File’s ...

Note: HTML in markdown is still bound by how HTML works inCommonMark.Make sure to use blank lines around block-level HTML that again containsmarkdown!

Appendix B: Components

You can also change the things that come from markdown:

The keys in components are HTML equivalents for the things you write withmarkdown (such as h1 for # heading)†

† Normally, in markdown, those are: a, blockquote, code, em, h1,h2, h3, h4, h5, h6, hr, img, li, ol, p, pre, strong, andul.With remark-gfm, you can also use: del, input, table, tbody,td, th, thead, and tr.Other remark or rehype plugins that add support for new constructs will alsowork with react-markdown.

The props that are passed are what you probably would expect: an a (link) willget href (and title) props, and img (image) an src (and title), etc.There are some extra props passed.

• code
  • inline (boolean?)— set to true for inline code
  • className (string?)— set to language-js or so when using ```js
• h1, h2, h3, h4, h5, h6
  • level (number beween 1 and 6)— heading rank
• input (when using remark-gfm)
  • checked (boolean)— whether the item is checked
  • disabled (true)
  • type ('checkbox')
• li
  • index (number)— number of preceding items (so first gets 0, etc.)
  • ordered (boolean)— whether the parent is an ol or not
  • checked (boolean?)— null normally, boolean when using remark-gfm’s tasklists
  • className (string?)— set to task-list-item when using remark-gfm and theitem1 is a tasklist
• ol, ul
  • depth (number)— number of ancestral lists (so first gets 0, etc.)
  • ordered (boolean)— whether it’s an ol or not
  • className (string?)— set to contains-task-list when using remark-gfm and thelist contains one or more tasklists
• td, th (when using remark-gfm)
  • style (Object?)— something like {textAlign: 'left'} depending on how the cell isaligned
  • isHeader (boolean)— whether it’s a th or not
• tr (when using remark-gfm)
  • isHeader (boolean)— whether it’s in the thead or not

Every component will receive a node (Object).This is the original hast element beingturned into a React element.

Every element will receive a key (string).See React’s docs for moreinfo.

Optionally, components will also receive:

• data-sourcepos (string)— see sourcePos option
• sourcePosition (Object)— see rawSourcePos option
• index and siblingCount (number)— see includeElementIndex option
• target on a (string)— see linkTarget option

Security

Use of react-markdown is secure by default.Overwriting transformLinkUri or transformImageUri to something insecure willopen you up to XSS vectors.Furthermore, the remarkPlugins and rehypePlugins you use and componentsyou write may be insecure.

To make sure the content is completely safe, even after what plugins do,use rehype-sanitize.That plugin lets you define your own schema of what is and isn’t allowed.

Related

• MDX— JSX in markdown
• remark-gfm— Plugin for GitHub flavored markdown support

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

MIT © Espen Hovlandsdal

Here my take to create a bare-bones markdown editor with real-time preview to make practice with React.js.

There are three components in this example:

• the main Wrapper
• the Editor
• the Render

The Wrapper is responsible to keep the markdown source in a state variable md, in order to let the children components use it as a bridge for our purpose.

The Wrapper also listens for any source changes from the Editor component, updating the md variable.

The Editor textarea looks something like:

The Editor uses an controlledtextarea element that accepts an initial value and dispatches any change back to the Wrapper.

The Render component is responsible to render from markdown to HTML the source:

Js Markdown To Html

In this example I used the library marked to convert the markdown source.

Every time the variable md changes, it does trigger a re-render in the Render component, generating a new HTML code.

Injecting HTML into the DOM in React.js needs to be very explicit: you have to use the attribute dangerouslySetInnerHTML with the object {__html: value} as value to make it to work.

That's all! As I said, very bare-bones.