/

syntax-highlight-any-block-web-page

帶有語法高亮的網頁中的任何區塊

我需要在網頁中添加語法高亮，但我不能更改標記。

大多數語法高亮庫（例如 Prism.js）都要求您使用固定的結構，如下所示：

 
 ...

引用如下：

Prism 會盡力鼓勵良好的作者實踐。因此，它僅與 <pre> 元素配合工作，因為在沒有 <pre> 元素的情況下，將代碼標記為無語義是無效的。

這聽起來很理想，但是我從外部來源得到的代碼在 div 中。你要求我使用那種標記，但我卻沒有。

最終，我找到了一個工具 https://highlightjs.org/，它讓我可以將語法高亮應用於我想要的頁面上的任何元素，只需先加載該庫，然後調用以下代碼：

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

tags: [“syntax highlighting”, “web development”, “library”]