javascript如何实现代码高亮_Prism.js的基本用法是什么-js教程-PHP中文网

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

夢幻星辰

发布： 2025-12-17 22:35:02

原创

979人浏览过

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

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

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

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

直接在 HTML 的 <code></code> 或页面底部加入 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" 的 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;"><code></code></pre>

登录后复制

</div> 结构会自动高亮（如 language-js、language-html）。

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

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

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

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

登录后复制

注意要点：

腾讯AI 开放平台

腾讯AI开放平台

381

查看详情

外层用 <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">，内层用 <code></code>


  <code></code> 必须带 class="xxx"，比如 language-python、language-bash

  不要写成 class="prism js" 或其他多余 class，除非你自定义了初始化逻辑



按需加载更多语言或功能（如行号、复制按钮）
Prism 默认只包含常用语言。需要 Python、PHP、JSX 等，要额外引入对应语言文件：

  例如添加 Python 支持：

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-python.min.js"></script>
  启用行号插件：

    引入插件 CSS + JS：

    <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.css" rel="stylesheet" />

    <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/line-numbers/prism-line-numbers.min.js"></script>

    然后给 <pre class="brush:php;toolbar:false;"> 加 class：

    <pre class="line-numbers"><code class="js">...登录后复制