Prism 语法高亮插件使用教程

2026-01-17 09:31:51作者：魏侃纯Zoe

1. 项目目录结构及介绍

在你克隆或下载 https://github.com/ment-mx/Prism.git 后，你会得到以下的基本目录结构：

Prism/
├── dist/                # 包含编译后的 CSS 和 JavaScript 文件
│   ├── prism.css        # 主题样式文件
│   └── prism.js         # 核心库文件
├── src/                 # 源代码目录
│   ├── prism.js         # 未压缩的核心源码
│   └── ...
├── languages/           # 语言定义文件
│   ├── prism-markup.js  # HTML, XML 等标记语言定义
│   └── ...              # 其它编程语言定义
└── themes/              # 主题样式
    ├── prism-dark.css   # 黑暗主题
    └── prism-light.css  # 浅色主题

说明：

dist/ 目录包含了可以直接在网页中使用的 CSS 和 JS 文件。
src/ 是原始源码，你可以在此基础上自定义或扩展 Prism 功能。
languages/ 存放了 Prism 对不同编程语言的支持文件。
themes/ 包含了预设的风格模板。

2. 项目启动文件介绍

Prism 的核心是 dist/prism.js 文件，这是一个最小化的、用于生产的版本。要引入到你的网页中，只需在页面头部添加如下代码：

<!DOCTYPE html>
<html>
<head>
  <link href="dist/themes/prism.css" rel="stylesheet">
</head>
<body>
  <script src="dist/prism.js"></script>
  <!-- 你的代码片段 -->
  <pre><code class="language-javascript">console.log('Hello, World!');</code></pre>
</body>
</html>

这里我们首先加载了默认的主题样式 prism.css，然后引入了 prism.js 来实现代码高亮功能。

3. 项目的配置文件介绍

Prism 并没有一个传统的配置文件，但它可以通过 JavaScript API 进行动态配置。例如，如果你只想初始化特定的代码元素，可以这样操作：

document.addEventListener('DOMContentLoaded', function() {
  Prism.highlightAll();
});

或者，如果你想要自定义语言或主题，可以在 HTML 中通过数据属性来指定：

<pre><code class="language-javascript data-line-numbers='2-4'>console.log('Line 1');<br/>
console.log('Line 2');<br/>
// Line 3 will be highlighted<br/>
console.log('Line 4');</code></pre>

在这段例子中，data-line-numbers 配置项使得第 3 行得到了高亮。

请注意，为了正确显示代码高亮，你需要确保代码被包裹在 <pre> 和 <code> 标签内，并设置正确的 class 属性（如这里的 language-javascript）。

有了这些基础，你应该能够顺利地在自己的项目中集成并使用 Prism 语法高亮插件。如果你想了解更多高级特性和插件，查看官方文档会有更详尽的指导。

Prism

Creates a beautiful artboard color palette with all your 'Document Colors' and their respective color label in a variety of formats.

项目地址：https://gitcode.com/gh_mirrors/prism/Prism

登录后查看全文