
后端流式消息高亮显示:前端 html 实现
问题:
在前后端通过 WebSocket 通信时,后端返回流式消息,希望在前端采用 HTML 显示时能高亮显示返回的消息中的代码片段,或将其转换为 Markdown 格式。目前已知代码高亮工具 Highlight.js 较为常用,但需要HTML页面代码实现示例来指导实践。
答案:
为了达到所述效果,可以参考以下 HTML 页面代码示例:
立即学习“前端免费学习笔记(深入)”;
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML 代码高亮显示</title>
<link rel="stylesheet" href="highlight/styles/default.css">
<script src="highlight/highlight.pack.js"></script>
<script>
hljs.initHighlightingOnLoad();
</script>
</head>
<body>
<h1>HTML 代码高亮</h1>
<pre><code id="code" class="java">
// websocket 接收消息
websocket.onmessage = (event) => {
const message = event.data;
// 将接收到的流式消息高亮显示
const codeElement = document.getElementById("code");
codeElement.textContent = message;
hljs.highlightElement(codeElement);
};
</code></pre>
</body>
</html>说明:
该 HTML 代码提供了以下功能:
以上就是后端流式消息如何实现前端 HTML 代码高亮显示?的详细内容,更多请关注php中文网其它相关文章!
HTML怎么学习?HTML怎么入门?HTML在哪学?HTML怎么学才快?不用担心,这里为大家提供了HTML速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号