A demo of react-markdown

A demo of react-markdown

Hello, world! Below is an example of markdown in JSX.

Take a look at the code and the following output:

• Example 1:

<div style={{padding: '1rem', backgroundColor: 'violet'}}>
  Try and change the background color to `tomato`.
</div>

• Example 2:

<div style={{backgroundColor: "green", padding: "14px"}}>
  <h1 style={{color: "yellow"}}>
    Test
  </h1>
</div>

It's possible create an element and apply it to your blog, like this YouTube video:

Pure Markdown

• Following, I will use the react-markdown text example to show the vanilla markdown:

react-markdown is a markdown component for React.

👉 Changes are re-rendered as you type.

👈 Try writing some markdown on the left.

Overview

• Follows CommonMark
• Optionally follows GitHub Flavored Markdown
• Renders actual React elements instead of using dangerouslySetInnerHTML
• Lets you define your own components (to render MyHeading instead of h1)
• Has a lot of plugins

Table of contents

Here is an example of a plugin in action (remark-toc). This section is replaced by an actual table of contents.

Syntax highlighting

Here is an example of a plugin to highlight code: rehype-highlight.

import React from "react";
import ReactDOM from "react-dom";
import ReactMarkdown from "react-markdown";
import rehypeHighlight from "rehype-highlight";

ReactDOM.render(
<ReactMarkdown rehypePlugins={[rehypeHighlight]}>
  {"# Your markdown here"}
</ReactMarkdown>,
document.querySelector("#content")
);

Pretty neat, eh?

GitHub flavored markdown (GFM)

For GFM, you can also use a plugin: remark-gfm. It adds support for GitHub-specific extensions to the language: tables, strikethrough, tasklists, and literal URLs.

These features do not work by default. 👆 Use the toggle above to add the plugin.

strikethrough

• task list
• checked item

https://example.com

HTML in markdown

⚠️ HTML in markdown is quite unsafe, but if you want to support it, you can use rehype-raw. You should probably combine it with rehype-sanitize.

👆 Use the toggle above to add the plugin.

Components

You can pass components to change things:

import React from "react";
import ReactDOM from "react-dom";
import ReactMarkdown from "react-markdown";
import MyFancyRule from "./components/my-fancy-rule.js";

ReactDOM.render(
<ReactMarkdown
  components={{
    // Use h2s instead of h1s
    h1: "h2",
    // Use a component instead of hrs
    hr: ({ node, ...props }) => <MyFancyRule {...props} />,
  }}
>
  # Your markdown here
</ReactMarkdown>,
document.querySelector("#content")
);

More info?

Much more info is available in the readme on GitHub!

A component by Espen Hovlandsdal