标签本身不提供高亮，仅声明语义并渲染为等宽字体；真正实现语法高亮必须同时满足四要素：嵌套结构、语言类名（如class="javascript"）、HTML实体转义、配套CSS主题与JS库（如highlight.js），缺一不可。

code

标签本身不提供高亮，只声明语义、渲染为等宽字体。真正实现语法高亮，必须配合

 当作行内元素：换行被压缩、缩进丢失、 会被解析成真实标签。highlight.js 和 Prism.js 都默认忽略  单独出现的场景——它们只扫描  这个嵌套结构。

• const x = 1;

  → 完全跳过，不解析也不报错
• → 没

  ，高亮库根本看不到它
  

• if (x 

  或 class="javascript"，只识别 language-js、language-python、lang-html 这类带标准前缀的写法。
  • 正确：

    console.log('hi');

  • 错误：

    console.log('hi');

    （v11+ 版本直接忽略）
  • 不确定语言时可用 class="plaintext"，强制不着色但保留格式
  • Prism.js 对 class 更宽容，但统一用 language-xxx 可避免跨库迁移问题

  HTML 特殊字符必须提前转义

  代码里含 、&，不转义就不是“展示代码”，而是让浏览器执行代码或破坏 DOM。这不是高亮库的问题，是 HTML 解析阶段就错了。

  

  财经HTML高端海报生成

  复杂得财经如何变成清晰，适合手机看的海报？如何加上你的IP

  下载
  • 原始代码：
  • 错误写法：

    <div id="app"></div>

    （浏览器真会创建 div 元素）
  • 正确做法：手动转义为
    ，或用 <script type="text/plain"></script> 包裹再读取 .textContent
  • 服务端输出建议调用 htmlspecialchars()；前端动态插入必须用 el.textContent = rawCode，绝不用 innerHTML

  脚本和 CSS 加载顺序不能错

  哪怕结构、class、转义全对，加载时机或样式缺失也会导致“有代码没颜色”——看起来像高亮失败，其实是链路断了。

  • hljs.highlightAll() 必须在 DOM 就绪后执行：document.addEventListener('DOMContentLoaded', () => hljs.highlightAll())，或把 script 放在