【亲测免费】 Prism.js 使用教程

2026-01-19 10:09:45作者：吴年前Myrtle

项目介绍

Prism.js 是一个轻量级、可扩展的语法高亮库，专为现代网页设计。它支持多种编程语言，并且可以通过插件扩展功能，如行号显示、行高亮等。Prism.js 的设计理念是尽可能小巧、快速且易于使用。

项目快速启动

安装

你可以通过以下几种方式安装 Prism.js：

直接下载：从 Prism.js 官网下载所需的文件。
使用 CDN：在 HTML 文件中引入 CDN 链接。

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet" />
</head>
<body>
    <pre><code class="language-javascript">const hello = "Hello, world!";</code></pre>

    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.js"></script>
</body>
</html>

使用示例

在 HTML 文件中，使用 <pre><code> 标签包裹代码块，并添加 language-xxxx 类来指定语言。

<pre><code class="language-javascript">
const hello = "Hello, world!";
console.log(hello);
</code></pre>

应用案例和最佳实践

案例一：博客代码高亮

在个人博客中使用 Prism.js 可以显著提升代码的可读性。以下是一个简单的示例：

<!DOCTYPE html>
<html>
<head>
    <link href="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/themes/prism.css" rel="stylesheet" />
</head>
<body>
    <article>
        <h1>我的第一篇博客</h1>
        <p>以下是一个简单的 JavaScript 示例：</p>
        <pre><code class="language-javascript">
const hello = "Hello, world!";
console.log(hello);
        </code></pre>
    </article>

    <script src="https://cdn.jsdelivr.net/npm/prismjs@1.29.0/prism.js"></script>
</body>
</html>