如何使用 highlight.js 在 HTML 页面中高亮显示后端流式返回的代码？-html教程-PHP中文网

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

霞舞

发布： 2024-11-06 17:22:11

原创

707人浏览过

如何使用 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="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>

登录后复制

使用方法：