Prism.js 是最轻量易用的 JavaScript 代码高亮方案，支持丰富语言和主题；需引入核心 CSS 和 JS，代码块须为 结构，按需加载语言或插件，并可手动调用 Prism.highlightAll() 处理动态内容。

JavaScript 实现代码高亮，最轻量、易用且支持丰富的语言和主题的方案之一就是 Prism.js。它不依赖 jQuery，体积小，按需加载语法插件，适合静态页面或现代前端项目。

引入 Prism.js（CDN 最快上手）

直接在 HTML 的 或页面底部加入 CDN 链接即可：

• 引入核心 CSS（决定高亮样式）：
  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism.min.css" rel="stylesheet">
• 引入核心 JS（含基础语法如 JavaScript、CSS、HTML）：
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"></script>

此时，所有带有 class="xxx" 的 <pre class="brush:php;toolbar:false;">&lt;code&gt;&lt;/code&gt;</pre> 结构会自动高亮（如 language-js、language-html）。

写法规范：HTML 结构必须正确

Prism 只处理符合约定结构的代码块：

立即学习“Java免费学习笔记（深入）”；

Gradle 9.8.0

Gradle 9.8.0 官方二进制分发包，适用于 Windows、macOS 与 Linux 的 Java、Kotlin 和 Android 项目构建。

下载

function hello() {
  console.log('Hello, Prism!');
}

注意要点：

• 外层用 <pre class="brush:php;toolbar:false;">&lt;/code&gt;，内层用 &lt;code&gt;&lt;code&gt;&lt;/code&gt;&lt;/li&gt; &lt;li&gt;&lt;code&gt;&lt;code&gt;&lt;/code&gt; 必须带 &lt;code&gt;class=&quot;xxx&quot;&lt;/code&gt;，比如 &lt;code&gt;language-python&lt;/code&gt;、&lt;code&gt;language-bash&lt;/code&gt;&lt;/li&gt; &lt;li&gt;不要写成 &lt;code&gt;class=&quot;prism js&quot;&lt;/code&gt; 或其他多余 class，除非你自定义了初始化逻辑&lt;/li&gt; &lt;/ul&gt; &lt;H3&gt;按需加载更多语言或功能（如行号、复制按钮）&lt;/H3&gt; &lt;p&gt;Prism 默认只包含常用语言。需要 Python、PHP、JSX 等，要额外引入对应语言文件：&lt;/p&gt; &lt;ul&gt; &lt;li&gt;例如添加 Python 支持：&lt;br&gt; &lt;code&gt;&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js&quot;&gt;&lt;/script&gt;&lt;/code&gt;&lt;/li&gt; &lt;li&gt;启用行号插件：&lt;br&gt; 引入插件 CSS + JS：&lt;br&gt; &lt;code&gt;&lt;link href=&quot;https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css&quot; rel=&quot;stylesheet&quot; /&gt;&lt;/code&gt;&lt;br&gt; &lt;code&gt;&lt;script src=&quot;https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js&quot;&gt;&lt;/script&gt;&lt;/code&gt;&lt;br&gt; 然后给 &lt;code&gt;&lt;pre class=&quot;brush:php;toolbar:false;&quot;&gt;&lt;/code&gt; 加 class：&lt;br&gt; &lt;code&gt;&lt;pre class=&quot;line-numbers&quot;&gt;&lt;code class=&quot;js&quot;&gt;...&lt;/code&gt;</pre>

手动触发高亮（适用于动态插入的代码）

如果代码块是 JS 动态生成（比如从 Markdown 渲染后插入），Prism 不会自动处理，需手动调用：

• 高亮单个代码块：
  Prism.highlightElement(codeDomNode);
• 高亮整个页面新插入的代码：
  Prism.highlightAll();

推荐在 DOM 插入完成后调用，比如在 setTimeout(() => { Prism.highlightAll(); }, 0) 或 MutationObserver 中使用。

基本上就这些。Prism 上手不复杂但容易忽略结构和加载顺序，按规范写好 HTML + 引对资源，就能稳定工作。