如何使用 HTML 实现 WebSocket 流式消息的代码高亮显示？

websocket 流式消息代码高亮显示：html 页面的实现方案

在前端页面中，如何高亮显示从后端流式返回的代码消息，是许多开发者面临的难题。本文将提供一种简单的 HTML 实现方案，帮助你实现代码高亮显示的华丽效果。

解决方案：利用 Highlight.js

Highlight.js 是一款广泛使用的代码高亮工具，它提供了丰富的语言支持和出色的可定制性。要使用 Highlight.js，你只需要按照以下步骤操作：

1. 在 部分加载 Highlight.js 库：

<script src="highlight.min.js"></script>

登录后复制

1. 准备一个用于显示代码的 HTML 元素，例如

   ：</li></ol><pre class="brush:php;toolbar:false"><pre id="code-content">

   登录后复制

   1. 在 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 的文档对样式进行自定义。

以上就是如何使用 HTML 实现 WebSocket 流式消息的代码高亮显示？的详细内容，更多请关注GTHOST其它相关文章！