您现在的位置：程式碼之家 >> 編程語言 > >> 更多程式語言 >> 程式設計疑難解答

前端技巧：網頁代碼高亮顯示 — 打造像 CSDN、博客一樣的代碼片塊

編輯：程式設計疑難解答

需求場景

在個人網站、技術博客或文檔頁面中嵌入程式碼，希望擁有：語法高亮、行號、複製按鈕、主題切換、語言自動檢測等專業 IDE 風格效果。

主流解決方案對比

方案	特點	適用場景
Prism.js	輕量 (2KB gzip)、模組化、插件豐富、無依賴	靜態站點、文檔、博客首選
Highlight.js	自動檢測語言、190+ 語言、主題多、CDN 友好	動態內容、Markdown 渲染管道
Shiki	用 TextMate 語法、完美還原 VS Code 高亮、支援雙主題	追求極致顯示效果、構建時編譯
CodeMirror / Monaco Editor	編輯器級、支援編輯、補全、Lint	在線 IDE、代碼編輯器嵌入

快速上手：Prism.js 範例

<!-- 1. 引入 CSS (選擇主題) -->
<link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism-tomorrow.min.css" rel="stylesheet" />

<!-- 2. HTML 結構 -->
<pre class="line-numbers"><code class="language-javascript">// 你的代碼
function hello() {
  console.log('Hello, World!');
}
</code></pre>

<!-- 3. 引入核心 JS + 常用插件 -->
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/components/prism-core.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/toolbar/prism-toolbar.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/plugins/copy-to-clipboard/prism-copy-to-clipboard.min.js"></script>

進階：Markdown 渲染管道整合

若使用 marked 或 markdown-it 渲染 Markdown，配合高亮庫：

// marked + Prism.js
const marked = require('marked');
const Prism = require('prismjs');
const loadLanguages = require('prismjs/components/');
loadLanguages(['javascript', 'python', 'java', 'cpp']);

marked.setOptions({
  highlight: (code, lang) => {
    if (Prism.languages[lang]) {
      return Prism.highlight(code, Prism.languages[lang], lang);
    }
    return code; // 無對應語言直接返回
  }
});