ChatGPT 后端返回的对话文本中，可能会包含 Markdown 格式的文本内容，如代码块、表格、数学公式等。ChatGPT 需要能够解析这些文本内容，并将其渲染成人类可以识别的格式。由于 Markdown 简单易用、具有可读性、可扩展性等优点，因此 ChatGPT 中选择使用 Markdown 作为标记语言，并借助相关工具将 Markdown 文本转换成 HTML 格式，实现各种文本效果，使 ChatGPT 能够更好地展示内容给用户。

在 ChatGPT 的前端页面中，marked 扮演了重要角色。由于 ChatGPT 需要处理和展示大量富文本内容，使用 marked 解析和编译 Markdown 文本成为了一个理想的解决方案。ChatGPT 利用 marked 的高性能特点，在实时预览功能中快速地将用户输入的 Markdown 文本转换为 HTML，以便用户能即时查看格式化后的效果，这为用户提供了一种高效的阅读体验。

首先，引入 highlight.js 库，安装并导入所需的样式。接下来，创建一个自定义的 marked 渲染器，并重写代码块渲染方法。在这个方法中，使用 highlight.js 的 highlight() 函数对代码片段进行高亮处理，代码示例如下。

1
2
3

import { marked } from 'marked';
import hljs from 'highlight.js';
import 'highlight.js/styles/github-dark.css'; // 或其他样式

这里我选择了 github 暗色主题的样式，highlight 还有很多种样式库，可以在 node_modules/highlight.js/styles/ 目录下找到。如果你想自定义样式，可以在 node_modules/highlight.js/styles/ 目录下找到 github-dark.css ，然后复制到你的项目中，修改样式后引入即可。

然后是创建一个自定义的 marked 渲染器，并重写代码块渲染方法。在这个方法中，使用 highlight.js 的 highlight() 函数对代码片段进行高亮处理，代码示例如下。

1
2
3
4
5
6
7

const renderer = new marked.Renderer();

renderer.code = (code, language) => {
  const validLang = hljs.getLanguage(language) ? language : 'plaintext';
  const highlightedCode = hljs.highlight(code, { language: validLang }).value;
  return `<pre><code class="hljs ${validLang}">${highlightedCode}</code></pre>`;
};

代码块的渲染方法中，返回结果一般都是一个 <pre> 标签，里面包含一个 <code> 标签， <code> 标签中的内容是经过 highlight.js 处理后的代码片段。如果你想在代码块中像 ChatGPT 那样有个显示代码语言和复制代码的头部，可以在 <pre> 标签中添加一个 <div> 标签来展示这些内容，代码示例如下。

1
2
3
4
5
6
7
8
9
10
11

renderer.code = (code, language) => {
  const validLang = hljs.getLanguage(language) ? language : 'plaintext';
  const highlightedCode = hljs.highlight(code, { language: validLang }).value;
  return `<pre>
    <div class="code-header">
      <span>${validLang}</span>
      <button>复制</button>
    </div>
    <code class="hljs ${validLang}">${highlightedCode}</code>
  </pre>`;
};

highlight.js 还可以检测代码的语言，如果代码的语言不在支持的语言列表中，可以使用 plaintext 作为默认语言。最后，将自定义的渲染器传入 marked 的 setOptions() 方法中，即可完成代码的渲染。

1

marked.setOptions({ renderer });

如果你是使用 React 来开发的话，可以使用 React 的 dangerouslySetInnerHTML 来渲染代码，代码示例如下。

1

<div dangerouslySetInnerHTML={{__html: marked.parse(message)}} />

和渲染代码块一样，我们需要在 marked 渲染器上重写表格的渲染方法，代码示例如下。

1
2
3
4
5
6

renderer.table = (header, body) => {
  return `<table class="your-table-style">
    <thead>${header}</thead>
    <tbody>${body}</tbody>
  </table>`;
};

表格渲染方法的返回结果一般是一个 <table> 标签，里面包含一个 <thead> 标签和一个 <tbody> 标签， header 参数是表格的表头， body 参数是表格的表体。在 table 标签中加上你的自定义 class，然后在样式文件中实现自己想要的效果即可。