websocket 流式消息代码高亮显示：html 页面的实现方案
在前端页面中，如何高亮显示从后端流式返回的代码消息，是许多开发者面临的难题。本文将提供一种简单的 HTML 实现方案，帮助你实现代码高亮显示的华丽效果。
解决方案：利用 Highlight.js
Highlight.js 是一款广泛使用的代码高亮工具，它提供了丰富的语言支持和出色的可定制性。要使用 Highlight.js，你只需要按照以下步骤操作：
- 在 <head> 部分加载 Highlight.js 库：
<script src="highlight.min.js"></script>
- 准备一个用于显示代码的 HTML 元素，例如 <pre>：
<pre id="code-content"></pre>
- 在 WebSocket 消息接收事件中，使用 highlight.highlight() 方法对收到的代码消息进行高亮处理：
websocket.onmessage = function(event) {
const message = event.data;
const highlightedCode = highlight.highlight(message).value;
document.getElementById('code-content').innerHTML = highlightedCode;
};效果展示
立即学习“前端免费学习笔记（深入）”；
以上代码将为后端流式返回的代码消息自动添加高亮样式，就像 GPT 聊天机器人的回复效果一般。
注意事项
- 确保你的后端服务器使用支持流式传输的协议，例如 WebSocket。
- 如果需要在代码中添加额外的 HTML 标签（例如换行符），需要使用 highlight.highlightAuto() 方法。
- 可以根据 Highlight.js 的文档对样式进行自定义。
