将Markdown字符串转成HTML

简介

使用以下插件，依次实现：markdown字符串转HTML、自动生成目录(toc)、代码高亮等功能。

• markdown-it：将markdown字符串转换成HTML字符串；
• html-react-parser：将上面HTML字符串转换成React，用在Node.js的web项目中展示最终排版；
• markdown-it-anchor：给HTML增加锚点，配合插件即可生成文档的目录(TOC)；
• markdown-it-toc-done-right：帮markdown自动生成目录(TOC)，依赖上面插件markdown-it-anchor；
• uslug：上面生成的目录(TOC)，有时候跳转会失败，原因就是markdown-it-anchor生成锚点id 与 markdown-it-toc-done-right 生成的herf 不匹配导致，uslug可解决此问题；
• 分割线

  ---

  无法显示：最终HTML页面无法显示分割线，原因是

  ---

  没有高度导致，用css设置高度hr{ height: 1px;}即可显示。
• highlight.js：markdown中代码解析成HTML后，跟正常文字一样是没有颜色、关键字高亮等样式的，此插件即可解决代码样式问题。

---

markdown-it

功能：把markdown字符串转换为HTML字符串.

# 安装
npm i markdown-it

# 使用
// 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!');

• markdown-it 源码
• markdown-it 插件下载
• Live Demo：查看markdown字符串变HTML的效果
• markdown-it 中文文档

---

html-react-parser

功能：将HTML字符串转成React元素。

1、安装

# npm安装
npm install html-react-parser --save

# yarn安装
yarn add html-react-parser

# CDN安装
<!-- 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>

2、使用

# 将HTML字符串转换为HTML
const parse = require('html-react-parser');
parse('
Hello, World!
'); // React.createElement('p', {}, 'Hello, World!')

# 将HTML字符串转换为HTML并替换其中属性
parse('

', {
   
  replace: ({
     attribs }) => attribs && attribs.id ===