javascript如何实现代码高亮_Prism.js的基本用法是什么

在网页中展示代码时，如果只是把一段黑白文字直接贴上去，可读性会大打折扣。语法高亮的作用就是根据编程语言的语法规则，给关键字、字符串、注释、函数名等不同元素上不同的颜色，让读者一眼就能看清代码结构。用javascript手写一套语法解析器显然不现实，而Prism.js正是一个体积小、易上手、扩展性强的轻量级高亮库，官网主页本身就用它做演示，效果经得起考验。下面从引入、使用到进阶配置，完整梳理一遍它的基本用法。

引入Prism.js的几种方式与主题选择

最简单的方式是直接使用官网的下载页或者CDN。Prism官网提供定制化下载，你可以勾选需要的语言（JavaScript、CSS、HTML、PHP、Python等等）和插件，系统会自动生成一个压缩后的js文件和css文件。如果只是做通用展示，也可以直接引用CDN上的完整版。以jsdelivr为例，引入方式如下：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.min.css" />
<script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.min.js"></script>

如果你在使用webpack、vite等构建工具的项目中，更推荐通过npm安装。执行 npm install prismjs 之后，可以在入口文件中按需引入核心和语言组件，这样打包体积更可控。例如：

import Prism from 'prismjs';
import 'prismjs/components/prism-python';
import 'prismjs/themes/prism.css';

Prism.highlightAll();

主题方面，Prism自带了Default、Dark、Funky、Okaidia、Twilight、Coy、Solarized Light等多套配色，只需要替换引入的css文件即可切换。比如想用深色主题，把css地址换成 prism-okaidia.min.css 就可以。主题本质上就是一套针对token类名的颜色定义，后期也可以在它的基础上自定义颜色变量，打造符合站点风格的配色。

代码块的书写结构与自动高亮机制

Prism的默认高亮是自动的：页面加载完成后，它会扫描DOM中所有带有 language-xxx 类的 <code> 元素并执行高亮。标准的写法是把 <code> 嵌套在 <pre> 里面，通过class指定语言：

<pre><code class="language-javascript">
function greet(name) {
  const msg = `Hello, ${name}!`;
  console.log(msg);
}
</code></pre>

这里有两个容易踩坑的地方需要注意。第一，代码内容中如果包含小于号，必须写成 <，否则浏览器会把它当成标签解析，导致代码结构被破坏。这也是为什么很多CMS在保存文章时要做HTML实体转义。第二，<pre> 默认保留源码中的缩进和换行，所以贴代码时要控制好缩进层级，避免页面出现多余的空白。

class中语言的写法遵循 language-前缀加语言标识 的规则，常见标识有 language-javascript、language-css、language-html、language-json、language-bash 等。如果不指定语言，Prism会尝试自动识别，但识别结果不一定准确，建议始终显式声明。另外，如果页面是单页应用，代码块是后期动态插入的，自动高亮不会触发，这时候需要手动调用方法。

手动高亮与常用插件的扩展用法

当内容通过ajax请求或者前端框架动态渲染时，可以在DOM插入后手动调用高亮函数。Prism提供了两个层面的API：highlightAll会扫描整个页面，而highlightElement只处理单个元素，后者更适合局部刷新场景：

// 只高亮某一个代码块，适合动态插入的内容
const block = document.querySelector('#my-code');
Prism.highlightElement(block);

// 也可以把一段纯文本高亮后返回HTML字符串
const html = Prism.highlight(
  'const a = 1;',
  Prism.languages.javascript,
  'javascript'
);

插件是Prism生态的一大亮点。行号插件（line-numbers）可以在代码左侧显示行号，只需引入对应js和css，然后给 <pre> 加上 line-numbers 类。复制到剪贴板插件（toolbar + copy-to-clipboard）会在代码块右上角生成一个复制按钮，用户体验提升明显。这两个插件都可以在官网下载页勾选后一起打包，也可以单独从components目录引入。

此外还有显示文件名的插件、代码行高亮插件、自动加载外部语言的autoloader插件等。其中autoloader特别实用，引入它之后，遇到未加载的语言会自动按需请求对应组件，不必提前把所有语言都打进包里，对多语言博客站点非常友好。

性能与样式定制的一些实践经验

Prism的解析是同步的，如果页面里有几十个超长代码块，首次高亮会有可感知的耗时。针对这种情况，可以放弃highlightAll，改用IntersectionObserver监听代码块进入视口后再调用highlightElement，实现懒高亮，首屏性能会明显改善。另外，autoloader虽然省心，但会为每种语言发一次请求，语言种类多时请求数量不可忽视，建议对高频语言仍然手动引入组件。

样式定制方面，高亮效果由token的类名控制，比如 comment、string、keyword、function、number 等。你可以在自己的样式表中覆盖这些类名的颜色，而不必修改主题源文件。配合css变量，还能轻松实现亮暗两套主题的切换。代码块的横向滚动建议给 <pre> 设置 overflow-auto 和最大宽度，移动端浏览体验会好很多。

总体来看，Prism.js的上手成本几乎为零：引入一个css和一个js，给代码块加上language类，高亮就自动生效。配合插件体系和手动API，它能覆盖从静态博客到复杂单页应用的绝大多数代码展示需求。对于不想引入重型编辑器内核、只需要纯展示场景的项目来说，它是一个非常值得首选的方案。

javascript代码高亮Prism.js语法高亮库修改时间：2026-09-15 12:41:15