简介
应用以下插件，顺次实现：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!');- 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字符串转换为HTMLconst 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 === 'remove' && <></>});# 将HTML字符串转换为HTML并替换其中标签<main/>为<div/>import parse, { attributesToProps } from 'html-react-parser';const html = `<main class="prettify" style="background: #fff; text-align: center;" />`;const options = { replace: domNode => { if (domNode.attribs && domNode.name === 'main') { const props = attributesToProps(domNode.attribs); return <div {...props} />; } }};parse(html, options);// 替换后后果：<div class="prettify" style="background:#fff;text-align:center"></div>3、注意事项
# 确保有父容器，否则会出错<ul> {parse(` <li>Item 1</li> <li>Item 2</li> `)}</ul>- html-react-parser插件下载
- html-react-parser源码
markdown-it-anchor
性能：作为markdown-it的插件应用，帮忙markdown-it解析后的HTML，加上锚点(<h/>标签减少id属性)，再配合上markdown-it-toc-done-right插件，就能够为markdown主动生成目录(TOC)。
1、装置
# 装置npm i markdown-it-anchor# 应用const md = require('markdown-it')() .use(require('markdown-it-anchor'), opts)2、应用留神
# 用uslug插件，解决锚点id中，「%XX」这种不可读的字符。$ 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})- markdown-it-anchor 插件下载
- markdown-it-anchor 源码
uslug
性能：为string生成一个slugify(惟一字符串，去掉或转换不可读、不反对的字符).
1、装置
npm install uslug2、应用
# 调用办法uslug(string, options)# 参数阐明string是待传入的字符串；options有三个值能够设置：1、allowedChars: 能够指定字符串放弃原样，不转换，缺省值：'-_~'.2、lower: 布尔值，是否强制转换为小写？缺省为true3、spaces: 布尔值，是否容许空格？缺省为false.# 应用案例uslug(' !') // '--'uslug('汉语/漢語') // '汉语漢語'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'3、能够配合其余插件应用
# 配合 markdown-it-anchor 插件生成slugify# 配合 markdown-it-toc-done-right 插件生成slugify- uslug 插件下载
- uslug源码
markdown-it-toc-done-right
性能：为markdown字符串转HTML过程中，生成目录(TOC)，依赖插件：markdown-it-anchor
1、装置
$ npm i -S markdown-it-toc-done-right markdown-it-anchor2、应用
# node.js 应用案例var 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!");# 另外一种应用计划// 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!");3、注意事项
# 应用过程中，引入uslug插件，这样能够使得markdown-it-anchor生成锚id，跟markdown-it-toc-done-right生成的href可能完全一致，不至于因为名称不同导致锚点跳转失败。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 } );- markdown-it-toc-done-right 插件下载
- markdown-it-toc-done-right 源码
highlight.js
性能：让markdown中代码，显示不同的字体款式(黑白、关键字高亮等).
1、装置
# 环境要求Node.js >= 12.xnpm >= 6.x# npm装置npm install highlight.js# yarn装置yarn add highlight.js2、加载并调用
#1.自动识别代码语言，并应用对应语言格局高亮const hljs = require('./highlight.js');const highlightedCode = hljs.highlightAuto('<span>Hello World!</span>').value#2.应用确定代码语言格局高亮html = hljs.highlight('<h1>Hello World!</h1>', {language: 'xml'}).value#3.对各个代码元素模块，自定义格局// first, find all the div.code blocksdocument.querySelectorAll('div.code').forEach(el => { // then highlight each hljs.highlightElement(el);});3、抉择款式，出现最初成果
# 在此门路「/node_modules/highlight.js/styles」，找到喜爱的css，复制文件到我的项目中，应用时加载import "../components/shades-of-purple.css"# 理论展现款式能够看上面官网给出的款式链接- 官网
- 官网 - 使用手册
- 官网 - 款式成果展现
markdown-it-multimd-table
1、装置
npm i markdown-it-multimd-table2、应用案例一
// defaultsvar 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(/*...*/)3、应用案例二
$ mkdir markdown-it-multimd-table$ cd markdown-it-multimd-table$ npm install markdown-it-multimd-table --prefix .$ vim test.js var 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- markdown-it-multimd-table插件下载
- markdown-it-multimd-table源码
参考文档
- 将Markdown字符串转成HTML