求助：Highlight.js无法为网页代码块添加高亮样式的问题

一、修复Highlight.js样式不生效问题 #

1. 确保DOM加载完成后执行初始化
   旧代码可能在DOM未完全加载时就执行，导致找不到目标元素。同时注意v11+版本中highlightBlock已废弃，改用highlightElement：

import hljs from 'highlight.js';

// 等待DOM加载完成后执行高亮
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('div.code pre code').forEach((block) => {
    hljs.highlightElement(block);
  });
});

2. 修正SCSS样式引入路径
   SCSS中引入node_modules内的文件需要添加~前缀，否则编译器无法正确定位样式文件：

@import '~highlight.js/styles/base16-atlas.css';

二、解决HTML代码块的语法错误与单行显示问题 #

1. 转义特殊字符避免服务器解析错误
   如果页面由PHP服务器渲染，直接写入<?php或<等字符会被服务器当作可执行代码解析，引发语法错误。需将代码中的特殊HTML字符转义：

• < → <
• > → >
• <?php → <?php
• ?> → ?>

修正后的代码块示例：

<div class="code">
  <pre><code class="language-php">
&lt;?php
echo "Hoeveel stapels wil je hebben? " . PHP_EOL;
$k = readline("");

for ($i = 0; $i &lt; $k; $i++) {
  for ($j = 0; $j &lt;= $i; $j++) {
      echo "*";
  }
  echo PHP_EOL;
}
?&gt;
  </code></pre>
</div>

2. 修复单行显示问题
   检查是否有CSS样式覆盖了<pre>的默认换行行为，确保pre元素的样式包含：

pre {
  white-space: pre; /* 保留换行和空格 */
  overflow-x: auto; /* 长代码横向滚动 */
}

同时避免构建工具压缩HTML时移除<pre>内的空白字符，可在构建配置中禁用对pre标签的空白压缩。

额外排查点 #

• 打开浏览器控制台，检查是否有模块加载失败（404）或JS报错；
• 确认code标签的class="language-php"正确，Highlight.js已内置PHP语言支持；
• 若使用前端框架（如Vue/React），需在组件挂载完成后再执行高亮逻辑。

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