Chatbot 为什么能够显示彩色代码？—— Highlight.js（代码高亮）学习总结

前言

上一篇文章中，我学习了 Markdown Rendering（Markdown 渲染）。

现在，AI 返回的 Markdown 已经能够正确转换成 HTML，并显示标题、列表、引用等格式。但是，当 AI 返回代码时，我又发现了一个新的问题。

例如：

```python
def hello():
    print("Hello")
```

虽然已经变成了代码块，但页面显示出来却是：

def hello():
    print("Hello")

整个代码都是黑色，没有任何颜色区分。

而 ChatGPT、Claude、DeepSeek 等 AI 产品中的代码却会自动变成彩色，并且不同关键字拥有不同颜色，阅读体验非常好。

于是，我开始学习 Highlight.js（代码高亮），理解 AI 聊天机器人是如何实现代码高亮的。

---

一、为什么需要 Highlight.js？

如果只有 Markdown Rendering。

AI 返回：

```python
def hello():
    print("Hello")
```

经过 marked.js 转换以后：

<pre><code class="language-python">
def hello():
    print("Hello")
</code></pre>

浏览器最终显示：

def hello():
    print("Hello")

虽然已经是代码块。

但是：

• 没有关键字颜色；
• 没有字符串颜色；
• 没有函数颜色；
• 阅读体验一般。

因此，我们需要：

Highlight.js 来为代码添加语法高亮。

---

二、什么是 Highlight.js？

Highlight.js 是一个：

JavaScript 代码语法高亮库（Syntax Highlighting Library）。

它能够识别：

• Python
• JavaScript
• Java
• C++
• Go
• Rust

等 190 多种编程语言。

它的作用就是：

HTML 代码块
        │
        ▼
Highlight.js
        │
        ▼
识别语言
        │
        ▼
添加颜色样式
        │
        ▼
浏览器显示彩色代码

因此 Highlight.js 本身并不会生成代码。

它只是负责：

给代码添加颜色。

---

三、Highlight.js 的工作流程

整个流程如下：

AI 返回 Markdown
        │
        ▼
marked.js
        │
        ▼
HTML
        │
        ▼
Highlight.js
        │
        ▼
添加高亮样式
        │
        ▼
浏览器显示彩色代码

可以看到 Markdown Rendering 负责：

Markdown

↓

HTML

Highlight.js 负责：

HTML

↓

彩色代码

二者共同完成代码显示。

---

四、Highlight.js 是如何工作的？

Markdown 转换以后 代码块会变成：

<pre>
    <code class="language-python">
        print("Hello")
    </code>
</pre>

其中：

class="language-python"

告诉 Highlight.js：

这是一段 Python 代码。

随后 Highlight.js 会读取：

<code>

里面的内容。

识别：

def

print

"Hello"

哪些属于：

• 关键字
• 函数
• 字符串
• 数字
• 注释

然后自动添加不同的 CSS class。

最终浏览器再根据 CSS，把代码显示成不同颜色。

---

五、Highlight.js 在 KK Chat 中的应用

在 KK Chat 中，整个流程如下：

用户发送消息
        │
        ▼
FastAPI
        │
        ▼
DeepSeek
        │
        ▼
返回 Markdown
        │
        ▼
marked.parse()
        │
        ▼
HTML
        │
        ▼
highlight.js
        │
        ▼
代码高亮
        │
        ▼
Message Rendering
        │
        ▼
浏览器显示

因此：

• REST API：负责通信；
• Markdown Rendering：负责格式转换；
• Highlight.js：负责代码高亮；
• Message Rendering：负责最终显示。

四者共同组成了完整的聊天显示流程。

---

六、如何使用 Highlight.js？

通常只需要：

hljs.highlightAll();

它会自动扫描页面中所有：

<pre><code>

代码块。

然后：

读取代码

↓

识别语言

↓

添加颜色

↓

刷新页面

如果只需要高亮某一个代码块。

也可以：

hljs.highlightElement(codeElement);

这样可以提高性能。

---

七、今天遇到的问题

① Markdown 已经转换成功，但代码没有颜色

原因：

只进行了 Markdown Rendering。

没有调用：

hljs.highlightAll();

因此代码仍然只是普通 HTML。

---

② 代码块语言识别错误

例如：

class="language-js"

写错。

Highlight.js 就无法正确识别。

因此Markdown 生成代码块时，

需要正确设置：

language-python

language-javascript

language-cpp

等等。

---

③ Streaming 时新增代码没有高亮

Streaming 会不断更新 DOM。

新的代码块不会自动高亮。

因此每次更新代码以后，需要重新调用：

hljs.highlightElement()

这样新增代码才能重新着色。

---

八、今天的收获

今天最大的收获，是理解了：

代码高亮并不是浏览器自带的功能，而是 Highlight.js 在 HTML 基础上再次进行处理。

整个流程可以总结为：

AI

↓

Markdown

↓

marked.js

↓

HTML

↓

highlight.js

↓

彩色代码

↓

浏览器页面

今天也进一步理解了：

• Markdown Rendering 负责格式转换；
• Highlight.js 负责代码高亮；
• Message Rendering 负责页面显示。

三者共同构成了现代 AI ChatBot 的前端展示能力。

---

总结

Highlight.js 的核心作用就是：

识别 HTML 中的代码块，并根据编程语言自动添加语法高亮。

虽然它只是前端中的一个小模块，却极大提升了代码的可读性，也是 ChatGPT、Claude、DeepSeek 等 AI 产品中不可缺少的一部分。

通过今天的学习，我不仅掌握了 Highlight.js 的工作原理，也进一步完善了 KK Chat 的代码显示效果，使整个聊天体验更加接近真正的 AI 产品。

---

今天学到了什么？

• Highlight.js（代码高亮）
• Syntax Highlight（语法高亮）
• hljs.highlightAll()
• hljs.highlightElement()
• language-python 等语言标识
• Highlight.js 与 Markdown Rendering 的关系
• Highlight.js 在 KK Chat 中的完整工作流程
• Streaming 与代码高亮之间的配合

---

KJ