对于一个文章开发者来说，牢固扎实的基础是十分重要的，golang学习网就来带大家一点点的掌握基础知识点。今天本篇文章带大家了解《后端流式消息如何实现前端 HTML 代码高亮显示？ 》，主要介绍了，希望对大家的知识积累有所帮助，快点收藏起来吧，否则需要时就找不到了！

后端流式消息高亮显示：前端 HTML 实现

问题：

在前后端通过 WebSocket 通信时，后端返回流式消息，希望在前端采用 HTML 显示时能高亮显示返回的消息中的代码片段，或将其转换为 Markdown 格式。目前已知代码高亮工具 Highlight.js 较为常用，但需要HTML页面代码实现示例来指导实践。

答案：

为了达到所述效果，可以参考以下 HTML 页面代码示例：

  
  
  
  
  


  
HTML 代码高亮
  
    // websocket 接收消息
    websocket.onmessage = (event) => {
      const message = event.data;

      // 将接收到的流式消息高亮显示
      const codeElement = document.getElementById("code");
      codeElement.textContent = message;
      hljs.highlightElement(codeElement);
    };
  

说明：

该 HTML 代码提供了以下功能：

• 加载 Highlight.js 库和样式表
• 初始化 Highlight.js，以自动高亮所有代码片段
• 定义一个 WebSocket 事件监听器，并在接收到消息后将其内容高亮显示

本篇关于《后端流式消息如何实现前端 HTML 代码高亮显示？ 》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！