preface

Markdown makes it easy to write articles, and we can retrieve HTML by parsing Markdown tools like Remarkable, Marked, and so on. Then use the React native dangerouslySetInnerHTML method to put it directly into the component.

Markdown is a lightweight markup language created by John Gruber. It allows people to “write files in plain text format that is easy to read and write, and then convert them into valid XHTML (or HTML) files.” The language absorbs many of the features of text-only markup already found in E-mail. – Wikipedia

We can parse the Markdown language and generate HTML through Remarkable. Js.

remakable

It is a high-speed Markdown parser. It supports Commonmark and installs different plug-ins such as syntax highlighting.

It has over 4000 Star counts on Github. Facebook, Docusaurus and others are also using remarks.js.

Remakable installation method

Install it by searching Remarkable directly through NPM.

npm install remarkable --saveCopy the code

Alternatively, you can use CDN to insert remakable into your HTML files.

/ / the CDN. Js < script SRC = "https://cdnjs.cloudflare.com/ajax/libs/remarkable/1.7.1/remarkable.min.js" > < / script > / / jsdelivr < script SRC = "https://cdn.jsdelivr.net/npm/[email protected]/index.min.js" > < / script >Copy the code

How to use remakable

First get the Remakable method using the require or import syntax, and then generate a Remarkable object through new.

With the render method it provides, we can get the HTML directly.

The code is as follows:

var Remarkable = require("remarkable"); var md = new Remarkable(); console.log(md.render("# Remarkable rulezz!" )); // => <h1>Remarkable rulezz! </h1>Copy the code

Syntax highlighting

If you look at the code examples in this article, you will notice that the statements have a different color, which is syntax highlighting.

Syntax highlighting is done by filling in the highlight value in the Remakable build method.

Highlight.js recognizes code in 185 languages and supports 89 styles. For example, the author likes Solarized Light, Github Gist.

var Remarkable = require("remarkable"); var hljs = require("highlight.js"); // https://highlightjs.org/ var md = new Remarkable({ highlight: function(str, Lang) {// if highlight.js supports the language we wrote if (lang && hljs.getLanguage(lang)) {try {return hljs.highlight(lang, STR).value;  } catch (err) {} } try { return hljs.highlightAuto(str).value; } catch (err) {} return ""; }});Copy the code

dangerouslySetInnerHTML

React provides the dangerouslySetInnerHTML method, which replaces the innerHTML method in the browser DOM. In general, treating code as HTML is a dangerous move because it can easily expose you to cross-site code (XSS) attacks. So React will require us to pass in an object with an __html value to remind us that this is a dangerous action.

Usage:

Function createMarkup() {return {__html: "First · Second"}; } function MyComponent() { return <div dangerouslySetInnerHTML={createMarkup()} />; }Copy the code

XSS code for the test:

<div style="color: RGB (" �x:expression(alert(1))"></div> <img/ SRC =%00 id=confirm(1) onError =eval(id) <div id=confirm(1) onmouseover=eval(id)>X</div> <span/onmouseover=confirm(1)>X</span>Copy the code

GatsbyJS

If you use the GatsbyJS framework, you can install the Gads-transformer -remark to install the remark.

Remarkjs Installation method

First you need to install Gatsby – Transformer -remark through NPM.

npm install --save gatsby-transformer-remarkCopy the code

Then insert the following code snippet into the plugins inside gatsby-config.js:

Plugins: [{resolve: 'gatsby-transformer-remark', options: {// CommonMark mode (default: true) CommonMark: Footnotes: true, // Pedantic mode (default: true) Pedantic: GFM: true, // Plugins: [],},},],Copy the code

Remarkjs Usage method

The Gatsby – Transformer -remark plug-in reads md, as well as markdown files, and generates MarkdownRemark nodes for GraphQL to use.

MarkdownRemark already has some of the more commonly used attributes like HTML, excerpt, and directory tableOfContents, which can be read directly.

You can retrieve all markdown articles via allMarkdownRemark, and then retrieve the compiled HTML code via beids.node.html.

{
  allMarkdownRemark {
    edges {
      node {
        html
        headings {
          depth
          value
        }
        frontmatter {
          title
        }
      }
    }
  }
}Copy the code

The resources

  1. DOM Elements – React
  2. jonschlinkert/remarkable – Github
  3. Gatsby – Transformer – Remark Official document