React Markdown

What is React Markdown?

React-markdown is a react component that securely converts markdown into HTML.  The fundamental concept is that you include the component in your render function and then insert Markdown between the opening and closing tags. It is created and updated by UnifiedJS, the same team that created RemarkJS.

The applications like Stream Chat, Gatsby, Netlify, and many others use react-markdown. Each week, more than 900,000 people download the npm package. There are more than 8200 ratings and 715 forks in the react-markdown repository on GitHub.

Installing React Markdown

There are ways in which we can install the React Markdown into our project. It is available as an npm package, therefore to install it, write the following command in the terminal.

However, it is also available in Deno with esm.sh. To install it, use the following statement.

Moreover, in browsers with esm.sh, it can be installed by using the following:

How to Use React Markdown?

The react markdown provides a component in which you can write your markdown text or content as children in it. It will then return the converted HTML code for our usage.

Here is an example of the same.

Therefore, anything written inside the ReactMarkdown component would appear as it is on the screen.

Plugins in React Markdown

Remark, the parent project of react-Markdown, has developed a variety of plugins you can use to improve the functionality of the library.

React-markdown, for instance, doesn't by default support auto links, strikethrough, tables, task lists, etc. You may have used Markdown to construct task lists and tables if you've ever created a readme file on GitHub. Remark developed remark-gfm, often known as Github Flavored Markdown, to meet this demand.

React-markdown offers two props — remarkPlugins and rehypePlugins — that allow you to use plugins. Both props accept an array of all the plugins you want to use. The remarkPlugin prop should have remark plugins like remark-gfm and remark-maths, and the rehypePlugins prop should contain rehype plugins like rehype-katex.

Therefore, for using different features, you need to use different plugins for a strikethrough feature, we use the remark-gfm plugin whereas for supporting a mathematical formula, you can use either the remark-maths or rehype-katex plugins. These plugins convert the mathematical notations into human-readable format.

Special Syntax for Remark-gfm Plugin

As discussed previously, remark-gfm is a plugin used for supporting strikethrough text, tables, and to-do lists. For using the remark-gfm plugin, we need to first use install it using the below command.

The remark-gfm plugin uses a special syntax for supporting such features in react. Let us see them in detail.

Moreover, for creating a table, we need to use the below syntax:

HTML in React Markdown

Although we are using react markdown editor to write rich text and to avoid hundreds of JSX tags or HTML tags in our file, there can be a situation where we are required to use HTML inside the Markdown such as a heading wrapped in a custom div.

For such scenarios, we have the Rehype-raw plugin that enables us to write HTML in React Markdown. Let us see how to use it with the help of a code example.

Explanation:

In the above code example, we have stored the HTML content inside the mainCon variable and passed it to the children prop to use it in the markdown, and for doing so we have already installed and imported the rehype-raw plugin into our project.

Supported Markdown Syntax

Now, let us see the markdown syntax supported by react that can be used to write text in the react markdown.

Custom Components

Custom components can be passed through as markdown targets with React-markdown as well. You can specify the component you wish to render using the components prop, for instance, if you want react-markdown to utilize your custom link component rather than the standard anchor element <a>.

The components prop accepts a dictionary of components, where the values are whatever you want them to render and the keys are the default tags.

Let us understand it with the help of a code example.

Explanation:

In the above example, instead of using the standard <a> tag, we are instructing react-markdown to utilize the Next.js Link component. Using Link causes all outgoing links on the site to be pre-fetched, which can improve performance.

Examples for Understanding

Now, let us see some examples to understand the working of react-markdown better.

Using Plugin with Options

We have several options that can be used along with the plugins in React Markdown editor. For using an option along with a plugin, we need to use an array with the plugin in the first place and the options in the second.

Now, let us see an example to understand it better.

Output:

Using Custom Components

This example demonstrates how providing a component overrides an element's default handling. We have used the Prism Syntax Highlighter for the same.

Let us see it with the help of a code example.

Output:

Using Remark and Rehype Plugins

The remark and the rehype plugins can be used to support mathematical equations and formulas in React Markdown. We will be using the remark-maths and rehype-katex plugins to support a mathematical equation in the react markdown.

Let us see it with the help of a code example.

Output: