Prism插件是一款网页代码高亮插件，其模块化安装与自定义样式特点，方便用户打造属于自己的代码美化样式
官网：https://prismjs.com/
Github仓库：https://github.com/PrismJS/prism
引入
基本方式
<!DOCTYPE html>
<html>
<head>
...
<link href="prism.css" rel="stylesheet" />
</head>
<body>
...
<script src="prism.js"></script>
</body>
</html>CDN
今日头条静态资源公共库
360 前端静态资源库
BootCDN
Npm
npm install prismjs
import Prism from 'prismjs';配置
语言选择
格式
✅ 请在<code>标签使用class类
language-语言名称 //(写法1)
lang-语言名称 //(写法2)示例
<pre>
<code class='lang-c'>#include <stdio.h>
int main()
{
printf("C programme\n");
return 0;
}</code>
</pre>
行号
格式
💠 全局设置：请在包含代码块父标签使用class类 line-numbers
💠 代码块：请在<pre>标签使用class类 line-numbers
❎ 无法在内联代码使用
可选
- data-start = '开始行号'
- 支持 white-space
- 自定义修改序号、分割线样式
示例
<pre class='line-numbers'>
<code class='lang-c'>#include <stdio.h>
int main()
{
printf("C programme\n");
return 0;
}</code>
</pre>
括号区分
格式
💠 全局设置：请在代码块父标签使用class类
💠 代码块：请在<code>标签使用class类
match-braces //括号悬停选中+高亮
no-brace-select //括号无法选中
no-brace-hover //括号无悬停选中
rainbow-braces //括号彩虹色高亮示例
复制按钮
格式
✅ 请确保安装Toolbar模块
✅ 请在<code>标签使用class类
❎ 不推荐在<html>添加class类
data-prismjs-copy = '复制提示'
data-prismjs-copy-error = '复制出错‘
data-prismjs-copy-success = '复制成功'
data-prismjs-copy-timeout = '复制后滞留时间（正数）'可选
💠 自定义修改copy-to-clipboard-button 按钮样式
示例
<pre class='line-numbers'
data-prismjs-copy='复制代码'
data-prismjs-copy-error='按Ctrl+C复制'
data-prismjs-copy-success='成功复制！'>
<code class='lang-c' data-prismjs-copy='复制'>#include <stdio.h>
int main()
{
printf("C programme\n");
return 0;
}</code>
</pre>
自定义关键词高亮
格式
✅ 请确保安装Highlight Keywords模块
✅ CSS语法
.token.keyword.keyword-自定义关键词{
关键词样式
}示例
.token.keyword.keyword-if{
color: red;
}
行内高亮
格式
💠 请在<pre>标签使用class类
data-line //区域范围设置
data-line = '4' // 第4行
data-line = '2-5' // 2-5行
data-line = '2-5,12' // 2-5和12行
lineable-line-numbers //行号链接（需要添加id）示例
<pre class='line-numbers'data-line="1,3-5">
<code class='lang-c'>#include <stdio.h>
int main()
{
printf("C programme\n");
return 0;
}</code>
</pre>
差异高亮
✅ 请在<code>标签使用class类
language-diff //使用行内文字颜色区分差异
language-diff-语言名称 //特定语言行内文字颜色区分差异
diff-highlight //使用行内背景颜色区分差异
language-diff diff-highlight //使用行内背景颜色与文字颜色区分差异
language-diff-语言名称 diff-highlight //特定语言行内背景颜色区分差异✅ 区分差异前缀
- 原先
+ 修改
❎ 不推荐同时使用语言高亮插件
示例1
<pre class='line-numbers'>
<code class="language-diff diff-highlight">#include <stdio.h>
- int main()
+ {
+ printf("C programme\n");
return 0;
}</code>
</pre>
示例2
<pre class='line-numbers'>
<code class="language-diff-c">#include <stdio.h>
- int main()
+ {
+ printf("C programme\n");
return 0;
}</code>
</pre>
示例3
<pre class='line-numbers'>
<code class="language-diff-c diff-highlight">#include <stdio.h>
- int main()
+ {
+ printf("C programme\n");
return 0;
}</code>
</pre>
命令行
💠 请在<pre>标签使用class类 command-line
💠 <pre>设置其他属性
data-user // 用户
data-host // host设置
data-filter-output = "(指定前缀)" // 输出指定前缀所在行并删除前缀示例
<pre class="command-line"
data-user="passwordgloo"
data-host="localhost"
data-output="3-9">
<code class="language-bash">cd ~/.ssh
ll
总用量 24
drwx------ 2 passwordgloo passwordgloo 4096 6月 8 20:54 ./
drwxr-x--- 23 passwordgloo passwordgloo 4096 6月 12 07:23 ../
-rw------- 1 passwordgloo passwordgloo 2610 6月 8 20:20 id_rsa
-rw-r--r-- 1 passwordgloo passwordgloo 574 6月 8 20:20 id_rsa.pub
-rw------- 1 passwordgloo passwordgloo 806 6月 8 20:54 known_hosts
-rw-r--r-- 1 passwordgloo passwordgloo 142 6月 8 20:54 known_hosts.old</code></pre>
目录树
请在<code>标签使用class类 language-treeview
<pre>
<code class='language-treeview'>Foresee/
├── Media/
| ├── Horizon.mp3
| ├── Info.mp4
| └── logo.svg
| ├── document.docx
| └── presentation.ppt
| ├── data.xls
├── .gitignore
├── style.css
├── archive.zip
├── archive.rar
├── index.html
├── README.md</code>
</pre>
文件高亮
❶ 请在<pre>标签添加 data-src
❷ 不要画蛇添足再次添加正文
自动处理并加载缺失语法
💠 支持用户自定义语法
Prism.plugins.autoloader.languages_path = '语法路径';无需设置
💠 Autolinker 自动链接
💠 Data-URI Highlight 数据-链接高亮
💠 Inline color 颜色指示方块
💠 Previewers 预览角度/颜色/渐变/速度曲线/延迟时间
💠 Toolbar 工具条
Wordpress使用注意
默认代码块无类名，需要手动添加，在functions.php使用以下代码替换原字符
function wp_replace_text($text_wp){
$replace = array(
// '原始文字' => '替换为这些'
'<pre>' => '<pre class="line-numbers">',
'<code>' => '<code class="language-php">',
);
$text_wp = str_replace(array_keys($replace), $replace, $text_wp);
return $text_wp;
}
add_filter('the_content', 'wp_replace_text'); //正文
