Prism插件是一款网页代码高亮插件，其模块化安装与自定义样式特点，方便用户打造属于自己的代码美化样式
官网：https://prismjs.com/
Github仓库：https://github.com/PrismJS/prism
引入
基本方式
<!DOCTYPEhtml><html>
<head>...
<linkhref="prism.css"rel="stylesheet"/></head><body>...<scriptsrc="prism.js"></script></body></html>
Npm
npm install prismjs
import Prism from 'prismjs';配置
语言选择
格式
✅ 请在<code>标签使用class类
language-语言名称 //(写法1)
lang-语言名称 //(写法2)示例
<pre><codeclass='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
- 自定义修改序号、分割线样式
示例
<preclass='line-numbers'><codeclass='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 //括号彩虹色高亮示例
彩虹括号与括号匹配（rainbow and match 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 按钮样式
示例
<preclass='line-numbers'data-prismjs-copy='复制代码'data-prismjs-copy-error='按Ctrl+C复制'data-prismjs-copy-success='成功复制！'><codeclass='lang-c'data-prismjs-copy='复制'>#include<stdio.h>int main()
{
printf("C programme\n");
return 0;
}</code></pre>
复制按钮（clipboard） 自定义关键词高亮
格式
✅ 请确保安装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）示例
<preclass='line-numbers'data-line="1,3-5"><codeclass='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
<preclass='line-numbers'><codeclass="language-diff diff-highlight">#include<stdio.h>- int main()
+ {
+ printf("C programme\n");
return 0;
}</code></pre>示例2
<preclass='line-numbers'><codeclass="language-diff-c">#include<stdio.h>- int main()
+ {
+ printf("C programme\n");
return 0;
}</code></pre>示例3
<preclass='line-numbers'><codeclass="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 = "(指定前缀)" // 输出指定前缀所在行并删除前缀示例
<preclass="command-line"data-user="passwordgloo"data-host="localhost"data-output="3-9"><codeclass="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><codeclass='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使用以下代码替换原字符
functionwp_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');//正文
发表留言 取消回复