登录
首页 >  文章 >  前端

如何使用 highlight.js 在 HTML 页面中高亮显示后端流式返回的代码？

时间：2024-11-19 14:04:04 407浏览 收藏

各位小伙伴们，大家好呀！看看今天我又给各位带来了什么文章？本文标题是《如何使用 highlight.js 在 HTML 页面中高亮显示后端流式返回的代码？ 》，很明显是关于文章的文章哈哈哈，其中内容主要会涉及到等等，如果能帮到你，觉得很不错的话，欢迎各位多多点评和分享！

如何使用 highlight.js 在 HTML 页面中高亮显示后端流式返回的代码？

html页面上的后端流式消息代码高亮

在后端流式返回消息的场景中，需要在前端的html页面上对代码进行高亮显示，以增强代码的可读性。可以使用highlight.js工具来实现这一效果。

highlight.js页面代码示例：

<head>
  <link rel="stylesheet" href="highlight.css">
  <script src="highlight.min.js"></script>
  <script>
    hljs.initHighlightingOnLoad();
  </script>
</head>

<body>
  <pre>
    <code class="language-javascript">
      // 后端返回的流式消息
      let message = "console.log('Hello, world!');";

      // 使用highlight.js高亮显示代码
      let html = hljs.highlight('javascript', message).value;

      // 显示高亮后的HTML代码
      document.querySelector('body').innerHTML = html;
    </code>
  </pre>
</body>

使用方法：

  1. 在head标签中导入highlight.css和highlight.min.js。
  2. 在body标签中使用pre和code标签包裹需要高亮的代码，并指定语言类型（如language-javascript）。
  3. 调用hljs.initHighlightingOnLoad()函数初始化highlight.js。
  4. 使用highlight.highlight()函数对代码进行高亮显示，并获取高亮后的HTML代码。
  5. 将高亮后的HTML代码插入页面中。

以上代码会在页面中显示高亮后的代码，效果类似于文章提供的图片所示。需要根据实际需要调整代码语言类型和样式。

以上就是《如何使用 highlight.js 在 HTML 页面中高亮显示后端流式返回的代码？ 》的详细内容，更多关于的资料请关注golang学习网公众号！

相关阅读
更多>
最新阅读
更多>
课程推荐
更多>