简介
使用以下插件,依次实现: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可解决此问题;分割线<hr/>无法显示
:最终HTML页面无法显示分割线,原因是<hr/>
没有高度导致,用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!');
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('<p>Hello, World!</p>'); // React.createElement('p', {}, 'Hello, World!')
# 将HTML字符串转换为HTML并替换其中属性
parse('<p><br id="remove"></p>', {
replace: ({
attribs }) => attribs && attribs.id ===