如何突出显示code块输出中的代码

<script src="https://cdn.jsdelivr.net/npm/highlight.js@9.18.1/build/highlight.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@9.18.1/styles/default.min.css">

<pre><code class="html">
&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;Hello World&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;h1&gt;Hello World!&lt;/h1&gt;
  &lt;/body&gt;
&lt;/html&gt;
</code></pre>

<script>
  hljs.initHighlightingOnLoad();
</script>

<pre style="background-color: #f1f1f1; color: #333;">
  <code>
    function helloWorld() {
      console.log("Hello, World!");
    }
  </code>
</pre>

<style>
  .highlight {
    background-color: #f1f1f1;
    color: #333;
  }
</style>

<pre class="highlight">
  <code>
    function helloWorld() {
      console.log("Hello, World!");
    }
  </code>
</pre>

`function helloWorld() {
  console.log("Hello, World!");
}`