介绍使用以下插件依次实现：markdown字符串转HTML，自动生成目录（toc），代码高亮等功能。markdown-it：将markdown字符串转换为HTML字符串；html-react-parser：将上述HTML字符串转换为React，并在Node.jsweb项目中使用它们显示最终的布局；markdown-it-anchor：为HTML添加锚点，使用插件生成文档目录（TOC）；markdown-it-toc-done-right：帮助markdown自动生成目录（TOC），依赖上述插件markdown-it-anchor；uslug：上面生成的目录（TOC），有时候会跳转失败，原因是markdown-it-anchor生成的anchorid和markdown-it-toc-done-right生成的herf不匹配，uslug可以解决这个问题；分界线

替换为

importparse,{attributesToProps}from'html-react-parser';consthtml=``;常量选项={替换：domNode=>{if(domNode.attribs&&domNode.name==='main'){constprops=attributesToProps(domNode.attribs);返回;}}};parse(html,options);//替换后的结果：

3.注释#确保有是父容器，否则会报错

Item1
Item2

html-react-parser插件下载html-react-parser源码markdown-it-锚点功能：作为markdown-it插件使用，帮助markdown-it解析HTML，添加锚点（标签添加id属性），然后配合markdown-itit-toc-done-right插件，只需为markdown自动生成目录（TOC）1.安装#安装npmimarkdown-it-anchor#使用constmd=require('markdown-it')().use(require('markdown-it-anchor'),opts)2.注意使用#使用uslug插件解决anchorid中不可读字符“%XX”。$npmi-Suslugconstuslug=require('uslug')constuslugify=s=>uslug(s)constmd=require('markdown-it')()constanchor=require('markdown-it-anchor',{slugify:uslugify})markdown-it-anchor插件下载markdown-it-anchor源代码uslug功能：为字符串生成一个slugify（唯一字符串，删除或转换不可读和不支持的字符）。1.安装npminstalluslug2、使用#调用方法uslug(string,options)#参数说明string为要传入的字符串；options有三个可以设置的值：1、allowedChars：可以指定字符串保持原样，不进行转换，默认值：'-_~'.2、lower：布尔值，是否强制要转换为小写？默认为true3，spaces：布尔值，是否允许空格？默认为假。#Usecaseuslug('Быстрееилучше!')//'быстрее-и-лучше'uslug('Chinese/Chinese')//'ChineseChinese'uslug('YUNO',{lower:false}))//'Y-U-NO'uslug('YUNO',{spaces:true}))//'yuno'uslug('Y-U|NO',{allowedChars:'|'}))//'yu|no'3.可以和其他插件一起使用#用markdown-it-anchor插件生成slugify#用markdown-it-toc-done-right插件生成slugifyuslug插件下载uslug源码markdown-it-toc-done-right功能：在markdown字符串转HTML的过程中，生成目录（TOC），依赖插件：markdown-it-anchor1，安装$npmi-Smarkdown-it-toc-done-对markdown-it-anchor2，使用#node.js用例变量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"));varresult=md.render("#markdown-itrulezz!\n\n${toc}\n##使用markdown-it-toc-done-right规则甚至更多！”);#另一种使用解决方案//没有AMD的浏览器，在脚本加载时添加到“窗口”//注意，“markdownit”中没有破折号。varmd=window.markdownit({html:false,xhtmlOut:true,typographer:true}).use(window.markdownItAnchor,{permalink:true,permalinkBefore:true,permalinkSymbol:'§'}).use(window.markdownItTocDoneRight);varresult=md.render("#markdown-itrulezz!\n\n${toc}\n##withmarkdown-it-toc-done-rightrulezz甚至更多！");3.注意事项#在使用过程中，引入uslug插件，这样markdown-it-anchor生成的anchorid可以和markdown-it-toc-done-right生成的href完全一致，这样锚点跳转不会因为名字不同而失败varmd=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#npminstallnpminstallhighlight.js#yarninstallyarnaddhighlight.js2，加载并调用#1。自动识别代码语言，使用对应的语言格式高亮consthljs=require('./highlight.js');consthighlightedCode=hljs.highlightAuto('HelloWorld!').value#2。使用指定的代码语言格式高亮html=hljs.highlight('

HelloWorld!

',{language:'xml'}).value#3。对于每个代码元素模块，自定义格式//首先，找到所有的div.code块document.querySelectorAll('div.code').forEach(el=>{//然后突出显示每个hljs.highlightElement(el);});3.选择样式，呈现最终效果#在这个路径"/node_modules/highlight.js/styles”，找到自己喜欢的css，复制文件到项目中，使用import时加载“../components/shades-of-purple.css”#实际的显示样式，可以看下面给出官方样式链接官方-手册官方-样式效果展示markdown-it-multimd-table1，安装npmimarkdown-it-multimd-table2，用例1//defaultsvarmd=require('markdown-it')().use(require('markdown-it-multimd-table'));//完整选项列表（相当于默认值）varmd=require('markdown-it')().use(require('markdown-it-multimd-table'),{multiline:false,rowspan:false,headerless:false,});md.render(/*...*/)3.用例2$mkdirmarkdown-it-multimd-table$cdmarkdown-it-multimd-table$npminstallmarkdown-it-multimd-table--prefix.$vimtest.jsvarmd=require('markdown-it')().use(require('markdown-it-multimd-table'));constexampleTable="||分组||\n"+"第一个标题|第二个标题|第三标题|\n"+"--------------|：-----------：|------------:|\n"+"内容|*长细胞*||\n"+"内容|**细胞**|细胞|\n"+"\n"+"新节|更多|资料|\n"+"还有更多|使用转义的'\\|'||\n"+"[Prototypetable]\n";console.log(md.render(exampleTable));$nodetest.js>test.html$firefoxtest.htmlmarkdown-it-multimd-table插件下载markdown-it-multimd-table源码参考文档Markdown字符串转HTML

ConvertMarkdownstringstoHTML

HelloWorld!