帶有語法高亮的網頁中的任何區塊 我需要在網頁中添加語法高亮，但我不能更改標記。 大多數語法高亮庫（例如 Prism.js）都要求您使用固定的結構，如下所示： 引用如下： Prism 會盡力鼓勵良好的作者實踐。因此，它僅與 <pre> 元素配合工作，因為在沒有 <pre> 元素的情況下，將代碼標記為無語義是無效的。 這聽起來很理想，但是我從外部來源得到的代碼在 div 中。你要求我使用那種標記，但我卻沒有。 最終，我找到了一個工具 https://highlightjs.org/，它讓我可以將語法高亮應用於我想要的頁面上的任何元素，只需先加載該庫，然後調用以下代碼： document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.my-code-div').forEach((el) => { hljs.highlightElement(el) }) })
VS Code 是目前使用最廣泛的程式碼編輯器之一。當你成為這麼受歡迎的編輯器時，人們會開發出很多好用的插件。其中一個很棒的插件是可以幫助 Vue.js 開發者的工具。 Vetur 安裝 Vetur 語法高亮 程式碼片段 智能提示 腳手架 Emmet 程式碼檢查 程式碼格式化 VS Code 是目前使用最廣泛的程式碼編輯器之一。編輯器（editor）如同許多軟體產品一樣，都有不同的周期。曾經有一段時間開發人員最愛的是 TextMate，然後是 Sublime Text，現在則是 VS Code。 能夠成為受歡迎的編輯器最棒的地方之一就是人們會花許多時間開發各種插件。 其中一個很棒的插件是可以幫助 Vue.js 開發者的工具。 Vetur 這個插件叫做 Vetur，非常受歡迎，下載量超過 300 萬，你可以在 Visual Studio Marketplace 上找到它。 安裝 Vetur 點擊安裝按鈕會觸發 VS Code 的安裝面板： 你也可以在 VS Code 的擴展面板中搜索 “vetur”： 這個擴展提供了什麼功能？ 語法高亮 Vetur 為所有的 Vue 源代碼文件提供了語法高亮功能。 沒有安裝 Vetur 時，VS Code 會以以下方式顯示 .vue 文件： 安裝了 Vetur 後： VS Code 能夠根據文件的擴展名識別出文件中包含的程式碼類型。 在使用單文件元件（Single File Component）時，你可以將不同類型的程式碼混在同一個文件中，包括 CSS、JavaScript 和 HTML。...