j*ascript如何实现代码高亮_Prism.js的基本用法是什么
Prism.js 是最轻量易用的 J*aScript 代码高亮方案，支持丰富语言和主题；需引入核心 CSS 和 JS，代码块须为 结构，按需加载语言或插件，并可手动调用 Prism.highlightAll() 处理动态内容。
J*aScript 实现代码高亮，最轻量、易用且支持丰富的语言和主题的方案之一就是 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（含基础语法如 J*aScript、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 只处理符合约定结构的代码块：
function hello() {
console.log('Hello, Prism!');
}
注意要点：
代码小浣熊
代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节
429
查看详情
- 外层用
<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，除非你自定义了初始化逻辑
; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false;">按需加载更多语言或功能（如行号、复制按钮）
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">...
手动触发高亮（适用于动态插入的代码）
如果代码块是 JS 动态生成（比如从 Markdown 渲染后插入），Prism 不会自动处理，需手动调用：
- 高亮单个代码块：
Prism.highlightElement(codeDomNode); - 高亮整个页面新插入的代码：
Prism.highlightAll();
推荐在 DOM 插入完成后调用，比如在 setTimeout(() => { Prism.highlightAll(); }, 0) 或 MutationObserver 中使用。
基本上就这些。Prism 上手不复杂但容易忽略结构和加载顺序，按规范写好 HTML + 引对资源，就能稳定工作。
以上就是j*ascript如何实现代码高亮_Prism.js的基本用法是什么的详细内容，更多请关注php中文网其它相关文章！
热门内容推荐
快捷栏目导航
