实时流式消息的代码高亮显示：如何使用 highlight.js 在前端实现？

实时流式消息的高亮显示

在构建实时通信应用时，前端后端经常通过 WebSocket 等通信协议进行交互。后端可能会以流式方式返回消息，就像 ChatGPT 官网的回答一样。对于前端开发人员来说，一个常见的挑战是如何对后端返回的代码片段进行高亮显示。

目前，实现后端流式消息代码高亮的广泛采用的工具是 highlight.js。下面提供了一些使用 highlight.js 实现页面代码高亮显示的代码示例：

<html>
<head>
  <link rel="stylesheet" href="highlight.min.css">
  <script src="highlight.min.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
  </script>
</head>
<body>
  <code id="code">
// 发送 WebSocket 消息
websocket.send('get_code');

// 服务器端返回代码片段
websocket.onmessage = (e) => {
  const code = e.data;
  document.getElementById('code').innerHTML = hljs.highlight('python', code).value;
};
  </code>
以上就是实时流式消息的代码高亮显示：如何使用 highlight.js 在前端实现？的详细内容，更多请关注其它相关文章！