如何在HTML页面内嵌入展示HTML标签 配合Prism.js实现语法高亮

• 核心前提：所有要展示的HTML特殊字符必须做实体转义，否则浏览器会直接解析标签不会作为文本展示，对应转义规则如下：
  • < 转义为 <
  • > 转义为 >
  • " 转义为 "
  • & 转义为 &
• 标准代码块结构
  你之前的示例存在结束标签闭合不全的问题，修正后的正确写法如下：

  <pre class="language-html">
  <code>&lt;script src="node_modules/three/build/three.min.js"&gt;&lt;/script&gt;</code>
  </pre>
  

• 免手动转义方案
  如果要展示的代码量很大不想逐个转义，可以用JS自动处理，步骤如下：
  1. 给<code>标签加自定义类名，比如raw-code，内部直接写原始HTML代码：

  <pre class="language-html">
  <code class="raw-code"><script src="node_modules/three/build/three.min.js"></script></code>
  </pre>
  

  2. 在引入Prism.js之前插入如下JS代码：

  document.querySelectorAll('.raw-code').forEach(block => {
    block.textContent = block.innerHTML
  })
  

注意：自动转义脚本必须在Prism.js执行前加载，否则会导致语法高亮失效

内容的提问来源于stack exchange，提问作者Tan