Convert the Markdown string to HTML

Introduction to the

Markdown string to HTML, automatic table of Contents (TOC), code highlighting, etc.

markdown-it: Converts markdown strings to HTML strings;
html-react-parserConvert the above HTML string to React and use it in the Node.js Web project to show the final layout;
markdown-it-anchor: Add anchors to HTML and plugin-generated document table of Contents (TOC);
markdown-it-toc-done-right: Help Markdown generate TOC automatically, depending on the plugin abovemarkdown-it-anchor;
uslug: TOC generated above, sometimes the jump fails, because the anchor id generated by markdown-it-anchor does not match the HERF generated by markdown-it-toc-done-right, uslug can solve this problem;
The split line <hr/> cannot be displayed: The final HTML page cannot display a separator because<hr/>If there is no height, use CSS to set the heighthr{ height: 1px; }Can be displayed.
highlight.js: Markdown code parses into HTML without color, keyword highlighting, etc., just like normal text. This plug-in can solve the code style problem.

markdown-it

Function: Convert markdown strings to HTML strings.

# Install NPM I markdown-it # use// node.js, "classic" way:
var MarkdownIt = require('markdown-it'), md = new MarkdownIt();
var result = md.render('# markdown-it rulezz! ');

// node.js, the same, but with sugar:
var md = require('markdown-it') ();var result = md.render('# markdown-it rulezz! ');
Copy the code

Markdown – it is the source code
Markdown – It plug-in download
Live Demo: See how markdown strings become HTML
Markdown-it Chinese document

html-react-parser

Function: Convert HTML strings to React elements.

1, install,

# NPM install NPM install html-react-parser --save # yarn install yarn add html-react-parser # CDN install <! -- HTMLReactParser depends on React --><script src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script src="https://unpkg.com/html-react-parser@latest/dist/html-react-parser.min.js"></script>
<script>
  window.HTMLReactParser(/* string */);
</script>
Copy the code

2, use,

# Convert HTML string to HTMLconst parse = require('html-react-parser');
parse('Hello, World! 
'); // React.createElement('p', {}, 'Hello, World! ')# Convert the HTML string to HTML and replace the attribute parse('<p><br id="remove"></p>', {
  replace: ({ attribs }) = > attribs && attribs.id === 'remove' && <></>}); # Convert the HTML string to HTML and replace the tag <main/> with <div/>import parse, { attributesToProps } from 'html-react-parser';

const html = `
      
        `
      ;
const options = {
  replace: domNode= > {
    if (domNode.attribs && domNode.name === 'main') {
      const props = attributesToProps(domNode.attribs);
      return <div {. props} / >; }}}; parse(html, options);// Result after replacement:
<div class="prettify" style="background:#fff; text-align:center"></div>


Copy the code

3. Precautions

<ul> {parse(` Item 1
 Item 2
 `)}
</ul>
Copy the code

Download the HTML – react-Parser plug-in
HTML – the react – parser source code

markdown-it-anchor

Markdown-it-toc-done-right is used as a markdown-it plug-in to help markdown-it parse HTML, add anchor points (tags add ID attributes), and add markdown-it-toC-done-right plug-in to automatically generate toCs for Markdown.

1, install,

# Install NPM I markdown-it-anchor # useconst md = require('markdown-it')()
  .use(require('markdown-it-anchor'), opts)

Copy the code

2, use attention

# Use the uslug plugin to solve the anchor id, "%XX" such unreadable character. $ npm i -S uslugconst uslug = require('uslug')
const uslugify = s= > uslug(s)

const md = require('markdown-it') ()const anchor = require('markdown-it-anchor', {
	slugify: uslugify
})
Copy the code

Markdown-it-anchor plug-in download
Markdown – it – anchor the source code

uslug

What it does: Generate an slugify(unique string, remove or transform unreadable, unsupported characters) for strings.

1, install,

npm install uslug
Copy the code

2, use,

Uslug (string, options) # String is the string to be passed in; Options have three values:1AllowedChars: you can specify that the string should remain unchanged and not be converted. Default value:'- _ ~'.
2Lower: Boolean value, whether to cast to lowercase? Default istrue
3Spaces: Boolean values, whether Spaces are allowed? Default isfalse# Use case uslug('Б ы с т р е е и л discusses some related problems ш е! ') / / 'б ы с т р е е и - л discusses some related problems ш е'
uslug('Chinese/Chinese') // 'Chinese Chinese'

uslug('Y U NO', { lower: false })) // 'Y-U-NO'
uslug('Y U NO', { spaces: true })) // 'y u no'
uslug('Y-U|NO', { allowedChars: '|' })) // 'yu|no'

Copy the code

3. It can be used with other plug-ins

#Generate slugify with markdown-it-Anchor plug-in
#Slugify is generated with the Markdown-it-toC-done-right plug-in
Copy the code

Download the USlug plug-in
Uslug source

markdown-it-toc-done-right

Function: Generate a directory (TOC) for markdown string during HTML conversion, depending on the plug-in: Markdown-it-Anchor

1, install,

$ npm i -S markdown-it-toc-done-right markdown-it-anchor

Copy the code

2, use,

# Node.js use casevar md = require("markdown-it") ({html: false.xhtmlOut: true.typographer: true
}).use( require("markdown-it-anchor"), { permalink: true.permalinkBefore: true.permalinkSymbol: '§' } )
  .use( require("markdown-it-toc-done-right"));var result = md.render("# markdown-it rulezz! \n\n${toc}\n## with markdown-it-toc-done-right rulezz even more!"); # Another use scheme// browser without AMD, added to "window" on script load
// Note, there is no dash in "markdownit".
var md = window.markdownit({
	html: false.xhtmlOut: true.typographer: true
}).use( window.markdownItAnchor, { permalink: true.permalinkBefore: true.permalinkSymbol: '§' } )
  .use( window.markdownItTocDoneRight );

var result = md.render("# markdown-it rulezz! \n\n${toc}\n## with markdown-it-toc-done-right rulezz even more!");
Copy the code

3. Precautions

In the process of using, uslug plug-in is introduced, so that the anchor ID generated by markdown-it-anchor can be completely consistent with the href generated by markdown-it-toc-done-right, so that the anchor point jump will not fail due to different names.var md = require("markdown-it") ({html: false.xhtmlOut: true.typographer: true
}).use( require("markdown-it-anchor"), { permalink: true.permalinkBefore: true.permalinkSymbol: '§', { slugify: uslugify} } )
  .use( require("markdown-it-toc-done-right"), { slugify: uslugify } );
Copy the code

Markdown-it-toc-done-right plug-in download
Markdown – it – the toc – done right – the source code

highlight.js

Function: Allows markdown code to display different font styles (color, keyword highlighting, etc.).

1, install,

#Environmental requirements
Node.js >= 12.x
npm >= 6.x

#NPM install
npm install highlight.js

#Yarn installation
yarn add highlight.js
Copy the code

2. Load and call

#1.Automatically recognize the code language and highlight it with the corresponding language formatconst hljs = require('./highlight.js');
const highlightedCode = hljs.highlightAuto('Hello World! ').value

#2.Highlight HTML = hljs.highlight(using the defined code language format)'Hello World! 
', {language: 'xml'}).value

#3.Customize the format for each code element module// first, find all the div.code blocks
document.querySelectorAll('div.code').forEach(el= > {
  // then highlight each
  hljs.highlightElement(el);
});
Copy the code

3. Select the style and render the final effect

# in this path "/ node_modules/highlight. Js/styles", find like CSS, copy the file to the project, when using loadimport ".. /components/shades-of-purple.css"You can see the official style link belowCopy the code

website
Official – User manual
Official – Style effect display

markdown-it-multimd-table

1, install,

npm i markdown-it-multimd-table
Copy the code

2. Use Case 1

// defaults
var md = require('markdown-it')()
            .use(require('markdown-it-multimd-table'));

// full options list (equivalent to defaults)
var md = require('markdown-it')()
            .use(require('markdown-it-multimd-table'), {
              multiline:  false.rowspan:    false.headerless: false}); md.render(/ *... * /)
Copy the code

3. Use Case two

$ mkdir markdown-it-multimd-table
$ cd markdown-it-multimd-table
$ npm install markdown-it-multimd-table --prefix .
$ vim test.jsvar md = require('markdown-it')() .use(require('markdown-it-multimd-table')); const exampleTable = "| | Grouping || \n" + "First Header | Second Header | Third Header | \n" + " ------------ | : -- -- -- -- -- -- -- -- -- -- - : | -- -- -- -- -- -- -- -- -- -- - : | \n" + "Content | *Long Cell* || \n" + "Content | **Cell** | Cell | \n" + " \n" + "New section | More | Data | \n" + "And more | With an escaped '\\|' || \n" + "[Prototype table] \n"; console.log(md.render(exampleTable));
$ node test.js > test.html
$ firefox test.html
Copy the code

Markdown-it-multimd-table plug-in download
Markdown – it – multimd – table source code

Reference documentation