【问题标题】：highlight.js: CSS styling absent after setting innerHTMLhighlight.js：设置 innerHTML 后 CSS 样式缺失
【发布时间】：2021-01-22 00:19:28
【问题描述】：
我正在使用 highlight.js 在网页中突出显示语法。
当我通过使用 JavaScript 设置相关的 innerHTML 来更改内容时，页面上的内容输出会按预期更新。但是，更改后的内容不会在浏览器中突出显示。
处理这种情况的正确方法是什么，通常还是仅使用 JavaScript、HTML 和 CSS 的 highlight.js？
【问题讨论】：
标签：
javascript
html
css
highlight.js
【解决方案1】：
感谢@Afsar 富有洞察力的评论，我找到了解决方案。
来自highlight.js的函数initHighlighting：
initHighlighting()
将突出显示应用于页面上的所有 <pre><code>...</code></pre> 块。
... 包含一个内部检查以查看它是否已经运行。由于我多次尝试运行它，突出显示无法正常工作。
因此，在通过 JavaScript 更新内容而不重新加载页面后更新突出显示的一种可能解决方案是：
var element = document.querySelector(".class_that_contains_code_blocks");
var blocks = element.querySelectorAll('pre code');
blocks.forEach(hljs.highlightBlock);