使用marked和highlight.js对GPT接口返回的代码块渲染,高亮显示,支持复制,和选择不同的高亮样式
// 引入marked和highlight.js
const marked = require('marked');
const hljs = require('highlight.js');
// 定义渲染代码块的函数
function renderCodeBlock(code, language) {
// 使用highlight.js提供的highlight方法来高亮代码
const highlighted = hljs.highlight(code, { language });
// 返回高亮后的HTML和是否复制的标志
return highlighted.value;
}
// 定义渲染代码块的方法
function render(code, language) {
// 使用marked来解析代码块,并指定高亮函数
return marked(code, {
gfm: true,
highlight: renderCodeBlock
});
}
// 示例:渲染一段Python代码
const pythonCode = `
def hello_world():
print("Hello, World!")
`;
const html = render(pythonCode, 'python');
console.log(html); // 输出高亮后的HTML代码
这段代码首先引入了marked
和highlight.js
这两个库,然后定义了一个renderCodeBlock
函数,它使用highlight.js
来高亮输入的代码。render
函数使用marked
来解析代码块,并且将高亮代码块的工作委托给了renderCodeBlock
函数。最后,示例中演示了如何使用render
函数来渲染一段Python代码。
评论已关闭