问题描述
网上有大量的帖子和例子使用marked和highlight时使用了highlight传入函数来高亮显示代码
但是事实上我在使用时没有这个对象
解决办法
我们可以在marked的扩展选项extensions中覆盖对"code"代码块的处理
marked.setOptions({
renderer: renderer,
gfm: true,
pedantic: false,
breaks: false,
extensions:{
renderers:{
["code"]:function(code:any){
return "<pre class='code'><code class=language "+code.lang+">"+hljs.highlight(code.text,{language:code.lang}).value+"</code></pre>"
}
},
childTokens:{
}
}
});
备注
extensions 扩展选项中的renderers可以对原来的处理进行覆盖
'code'表示对代码块进行处理,感兴趣的可以去翻看其他的选项,通过修改可以做很多事情
其他方法:
我们可以不改变marked的输出
然后代码块获取后用hljs.highlightElement(element)方法对改变后的代码高亮显示