使用marked和highlight.js对GPT接口返回的代码块渲染,高亮显示,支持复制,和选择不同的高亮样式
    		       		warning:
    		            这篇文章距离上次修改已过439天,其中的内容可能已经有所变动。
    		        
        		                
                
// 引入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代码。
评论已关闭