vue中使⽤marked+highlight.js实现代码⾼亮效果
marked是对markdown进⾏解析的插件，它可以把markdown语法解析成html语法，从⽽实现页⾯效果，⽽highlight.js是对解析出的代码实现⾼亮效果，在实现代码⾼亮的时候我也⽤了其他⽅式，效果并不理想，踩了⼀些坑，下⾯给⼤家介绍如何避免这些坑！
安装 marked
npm install marked --save
安装 highlight.js
npm install highlight.js --save
实现代码
<template>
<div class="detail">
<div class="markdown-body">
<div class="article_message hljs renderNav" v-html="code"></div>
</div>
</div>
</template>
<script>
import marked from"marked";// 引⼊marked
import hljs from"highlight.js";// 引⼊ highlight.js
import"highlight.js/styles/monokai-sublime.css";// 引⼊⾼亮样式这⾥我⽤的是sublime样式
export default{
name:"Detail",
data(){
return{
code:'```javascript\nfunction(){\n\tconsole.log(123)\n}\n```',// 要解析的markdown语法的内容
}
},
mounted(){
var rendererMD =new marked.Renderer();
marked.setOptions({
renderer: rendererMD,
highlight:function(code){
return hljs.highlightAuto(code).value;
},
pedantic:false,
gfm:true,
tables:true,
breaks:false,
sanitize:false,
smartLists:true,
smartypants:false,
xhtml:false
如何下载javascript
});
},
</script>
实现效果
请前往查看详情
避免踩坑
1.这⾥安装的marked与highlight.js都是最新版本，所以我在下载的时候也是最新的版本，这样会导致⼀个问题，注释会与主代码的样式⼀样，都是⾼亮状态，这样让⼈看得极不舒服，于是我查询了⼤量⽂献也没到解决办法，最后我从版本⼊⼿，最终解决问题
版本如下：
2.highlight.js⾼亮的样式也可⼀改变，你可以点击下⾯的链接选取你喜欢的样式

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。