Vue中markdown和高亮的各种解决方案

Markdown到H5目前对Vue2.6.11、3.0无效以下是这里的版本"hyperdown":"^2.4.7","prismjs":"^1.22.0","vue-happy-scroll":"^2.1.1》第一步：安装cnpmihyperdown-Scnpmiprismjs-S第二步：创建两个.js文件在根目录下创建两个js，第一个文件的名字是md-loader.jsconstHyperDown=require('hyperdown');constPrism=require('prismjs');functionmarkdownLoader(val){让解析器=newHyperDown();让html=parser.makeHtml(val);html=html.replace(/(?<=

]*?>)[\s\S]*?(?=<\/code>\/pre>)/gi,v=>{v=v.replace(/_&/g,'').replace(/"/g,'"').replace(//g,'>').replace(/&/g,'&');返回Prism.highlight(v,Prism.languages.javascript);});返回(``);}module.exports=markdownLoader;第二个文件名：vue.config.jsmodule.exports={publicPath:'./',configureWebpack:config=>{config.module.rules.push({测试：/\.md$/，使用：[{loader:'vue-loader',},{loader:require.resolve('./md-loader')}],},);},};import可以在main.js中导入css主题。如果找不到，直接创建即可。CSS源代码在这里import'prismjs/themes/prism-okaidia.css';code[class*="language-"],pre[class*="language-"]{color:#f8f8f2;background:0;文本阴影:01pxrgba(0,0,0,0.3);字体系列:Consolas,Monaco,'AdaleMono','UbuntuMono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}pre[class*="language-"]{padding:1em;margin:.5em0;overflow:auto;border-radius:.3em}:not(pre)>code[class*="language-"],pre[class*="language-"]{background:#272822}:not(pre)>code[class*="language-"]{padding:.1em;border-radius:.3em;white-space:normal}.token。评论，.token.prolog，.token.doctype，.token.cdata{color:#8292a2}.token.punctuation{col或者：#f8f8f2}.token.namespace{opacity:.7}.token.property,.token.tag,.token.constant,.token.symbol,.token.deleted{color:#f92672}.token.boolean,.token.number{color:#ae81ff}.token.selector,.token.attr-name,.token.string,.token.char,.token.builtin,.token.inserted{color:#a6e22e}.token.operator,.token.entity,.token.url,.language-css.token.string,.style.token.string,.token.variable{color:#f8f8f2}.token.atrule,.token.attr-value,.token.function,.token.class-name{color:#e6db74}.token.keyword{color:#66d9ef}.token.regex,.token.important{color:#fd971f}.token.important,.token.bold{font-weight:bold}.token.italic{font-style:italic}.token.entity{cursor:help}测试是否成功测试>测试引入**测试加粗**`cnpmiceshi-S`[百度](http://www.baidu.com)![logo-dark.png](http://laji.mxlogo.com/uni1.png)-床前明月光-地上两双鞋1.吃2.喝3.打豆豆||||-----|-----||更多|XXXXX|