html页面如何将后端流式消息的代码高亮显示？

前后端通过websocket进行通信，后端返回消息时采用流式返回，就像gpt官网回答问题。
前端的页面主要是html，想问问如何将后端返回的代码高亮显示，或者将代码放在md中。
我查了资料，用的最多的工具是highlight，想问问大家有没有相关的页面代码例子参考下
效果大概如下：

希望页面简单点，html实现即可

阅读 3.7k

使用prism https://github.com/PrismJS/prism
https://jsrun.net/MRdKp/edit

<head>
    <link href="https://cdn.bootcdn.net/ajax/libs/prism/9000.0.1/themes/prism.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/prism/9000.0.1/themes/prism-okaidia.css" rel="stylesheet">
</head>

<body>
    <section class="language-markup">
        <h2>code.language-css</h2>
        <code class="language-css">p { color: red; }</code>

        <h2>pre.language-css > code</h2>
        <pre class="language-css"><code>p { color: red; }</code></pre>

        <h2>pre > code.language-css</h2>
        <pre><code class="language-css">p { color: red; }</code></pre>

        <h2>pre.language-css > code.language-*</h2>
        <pre class="language-css"><code class="language-*">p { color: red; }</code></pre>

        <h2>code.lang-css</h2>
        <code class="lang-css">p { color: red; }</code>

        <h2>pre.lang-css > code</h2>
        <pre class="lang-css"><code>p { color: red; }</code></pre>

        <h2>pre > code</h2>
        <p>No language, should inherit .language-markup</p>
        <pre><code>&lt;p>hi!&lt;/p></code></pre>

        <h2>code.language-*</h2>
        <p>No language, should inherit .language-markup</p>
        <code class="language-*">&lt;p>hi!&lt;/p></code>

        <h2>code.language-none</h2>
        <p>Should not be highlighted.</p>
        <code class="language-none">&lt;p>hi!&lt;/p></code>
    </section>
    <script src="https://cdn.bootcdn.net/ajax/libs/prism/9000.0.1/prism.js"></script>
</body>

html页面如何将后端流式消息的代码高亮显示？

你尚未登录，登录后可以

js 如何将Key属性相同的放在同一个数组？

vue项目如何在初始化之前跳转外部页面？

js如何控制移动端overflow:scroll容器滑动的最大速度？

前端代码更新如何通知用户刷新页面？

纯css如何绘制一个无背景色有边框色，带有文字的倒等腰梯形？

字节的 trae AI IDE 不支持类似 vscode 的 ssh remote 远程开发怎么办？

为什么会出现CORS error？