Marked.js 高亮渲染配置的正确使用方式

在使用 Marked.js 进行 Markdown 解析时，很多开发者会遇到代码高亮功能配置不当的问题。本文将以一个典型错误案例为切入点，深入讲解如何正确配置 Marked.js 的代码高亮功能。

常见错误场景

开发者经常尝试直接将高亮配置传递给 marked.parse() 方法，如下所示：

document.getElementById('content').innerHTML = marked.parse(md, markedHighlight.markedHighlight({
    // 高亮配置
}));

这种用法会导致 Uncaught TypeError: this.renderer.space is not a function 错误，因为配置方式不正确。

正确配置方法

Marked.js 的高亮功能应该通过 marked.use() 方法来配置：

// 首先配置高亮选项
marked.use(markedHighlight.markedHighlight({
    emptyLangClass: 'hljs',
    langPrefix: 'hljs language-',
    highlight(code, lang, info) {
        const language = hljs.getLanguage(lang) ? lang : 'plaintext';
        return hljs.highlight(code, { language }).value;
    }
}));

// 然后解析Markdown
document.getElementById('content').innerHTML = marked.parse(md);

配置参数详解

1. emptyLangClass：当代码块未指定语言时应用的CSS类名
2. langPrefix：代码块语言类名前缀
3. highlight：自定义高亮函数，接收三个参数：
   • code：需要高亮的代码内容
   • lang：代码块指定的语言
   • info：代码块附加信息

高亮函数实现

在高亮函数中，通常会使用 highlight.js 这样的库来处理代码高亮：

highlight(code, lang, info) {
    // 检查语言是否支持
    const language = hljs.getLanguage(lang) ? lang : 'plaintext';
    // 返回高亮后的HTML
    return hljs.highlight(code, { language }).value;
}

最佳实践建议

1. 始终先配置后使用，确保所有扩展功能在解析前就绪
2. 对于不支持的语言提供回退方案（如使用'plaintext'）
3. 考虑添加错误处理，避免因高亮失败影响整体渲染
4. 合理设置CSS类名前缀，确保与现有样式系统兼容

通过正确配置 Marked.js 的高亮功能，开发者可以轻松实现美观的代码块渲染效果，提升文档的可读性和专业性。