marked highlight:“highlight”不在类型“MarkedOptions”中

问题描述

网上有大量的帖子和例子使用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)方法对改变后的代码高亮显示