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

发布日期： 2024-11-07 阅读量： 作者： 网络

实时流式消息的高亮显示

在构建实时通信应用时，前端后端经常通过 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>
  <pre class="brush:php;toolbar:false"><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>

# css # python

上一篇: Go 函数动态检查的道德和伦理考量

下一篇: 如何访问docker容器ip

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

随便看看