语法高亮显示网页上的任何块

我需要在一个页面上添加语法高亮，但我没有时间去改变标记。

大多数语法高亮库，如Prism.js，强迫你使用这样的固定结构。

<pre>
  <code class="language-js">
    ...
  </code>
</pre>

引用这个。

Prism尽力鼓励良好的创作实践。因此，它只适用于 elements, since marking up code without a `element is semantically invalid.`

这一切都很好，很理想化，但我的代码是在一个来自外部的div 。你强迫我使用这种标记，但我没有这种标记。

我终于找到了highlightjs.org/，它可以让我在页面上对任何我想要的元素应用语法高亮，方法是先加载库，然后调用。

document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.my-code-div').forEach((el) => {
    hljs.highlightElement(el)
  })
})