使用highlight.js无法高亮可切换div内代码的问题求助

这个问题我之前也碰到过，根源在于highlight.js的初始化逻辑——它默认只会在页面首次加载时扫描并高亮所有已存在于DOM中的代码块。那些一开始被display:none隐藏的元素，即使本身在DOM里，当你动态修改样式让它显示后，highlight.js不会自动重新处理这些代码块，所以才会出现代码显示但没有高亮的情况。

下面给你几个可行的解决方案：

方案1：手动触发单个代码块的高亮 #

当你显示隐藏的div后，直接找到里面的<code>元素，调用highlight.js的highlightElement方法手动触发高亮。

修改后的完整示例代码：

<!DOCTYPE html>
<html>
<head>
  <!-- 引入highlight.js的样式和核心脚本 -->
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/styles/github-dark.min.css">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.7.0/highlight.min.js"></script>
  <!-- 页面加载时初始化一次高亮 -->
  <script>hljs.highlightAll();</script>
</head>
<body>
  <button onclick="showCodeBlock()">显示Python代码</button>
  <!-- 初始隐藏的代码块容器 -->
  <div id="hiddenCode" style="display:none;">
    <pre><code class="language-python">
def calculate_sum(a, b):
    """计算两个数的和"""
    result = a + b
    print(f"结果是: {result}")
    return result

# 调用函数
calculate_sum(5, 7)
    </code></pre>
  </div>

  <script>
    function showCodeBlock() {
      // 获取代码容器div
      const codeContainer = document.getElementById('hiddenCode');
      // 显示div
      codeContainer.style.display = 'block';
      // 找到里面的code元素
      const codeElement = codeContainer.querySelector('code');
      // 手动触发高亮
      hljs.highlightElement(codeElement);
    }
  </script>
</body>
</html>

方案2：批量处理容器内的所有代码块 #

如果你的div里有多个代码片段，不用逐个查找，直接用highlightAllUnder方法处理整个容器下的所有代码块，更高效：

function showCodeBlock() {
  const codeContainer = document.getElementById('hiddenCode');
  codeContainer.style.display = 'block';
  // 处理容器内所有符合条件的代码块
  hljs.highlightAllUnder(codeContainer);
}

关键注意事项 #

• 确保你的<code>标签加上了正确的语言类，比如language-python，这样highlight.js才能识别要使用哪种语言的高亮规则。
• 如果是动态添加到DOM中的代码块（不是一开始就隐藏在DOM里），也需要在代码插入DOM后调用上述高亮方法，逻辑是一样的。

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