Prism.js 详细教程：从入门到高级应用

最新推荐文章于 2025-05-23 20:26:34 发布

王小玗

最新推荐文章于 2025-05-23 20:26:34 发布

阅读量816

点赞数 16

分类专栏： javscript css html 文章标签： html5 前端图形渲染 javascript 编辑器

©️版权归王小玗所有，文章标注则不要版权

本文链接：https://blog.csdn.net/a181001_/article/details/148128203

版权

Prism.js 详细教程：从入门到高级应用

Prism.js 是一个轻量级、可扩展的代码语法高亮库，支持超过200种编程语言，被广泛应用于技术博客、在线文档和教育平台等场景。本教程将全面介绍 Prism.js 的使用方法，包括基础配置、高级功能以及与各种前端框架的集成。

一、Prism.js 基础介绍

1.1 什么是 Prism.js

Prism.js 是一个现代化的代码语法高亮工具，具有以下核心特点：

轻量级：核心文件仅2KB（压缩并gzip后）
可扩展：支持通过插件扩展功能，如行号显示、代码复制按钮等
多语言支持：内置支持上百种编程语言和标记语言
主题丰富：提供多种配色主题，支持自定义
高性能：支持Web Workers进行并行处理

1.2 核心组件

Prism.js 主要由三部分组成：

核心文件：提供基本的高亮功能
语言定义：每种语言有单独的定义文件
插件：扩展核心功能，如行号、自动链接等

二、快速入门

2.1 基础使用

最简单的使用方式是通过CDN引入Prism.js：

<!DOCTYPE html>
<html>
<head>
    <!-- 引入主题样式 -->
    <link href="https://cdn.jsdelivr.net/npm/prismjs@latest/themes/prism.css" rel="stylesheet" />
</head>
<body>
    <!-- 引入核心文件 -->
    <script src="https://cdn.jsdelivr.net/npm/prismjs@latest/components/prism-core.min.js"></script>
    <!-- 引入需要的语言组件 -->
    <script src="https://cdn.jsdelivr.net/npm/prismjs@latest/components/prism-javascript.min.js"></script>
    
    <!-- 代码示例 -->
    <pre><code class="language-javascript">
    function hello() {
        console.log('Hello, Prism.js!');
    }
    </code></pre>
    
    <!-- 初始化高亮 -->
    <script>
        document.addEventListener(