Prism.js非插件代码语法高亮

发布时间：2025-01-15 以下文章来源于网友投稿，内容仅供参考！

最近有好几个人问我使用的是哪个代码高亮插件？其实我并没有使用 WordPrees 插件，而是直接使用了一个 Javascript 库 —— Prism 是一款轻量、可扩展的代码语法高亮库，使用现代化的 Web 标准构建。

为什么选择 Prism.js ？

极致易用
引用 prism.css 和 prism.js，使用合适的 HTML5 标签（code.language-xxxx），搞定！
天生伶俐
语言的 CSS 类是可继承的，所以你只需定义一次就能应用到多个代码片段。
轻如鸿毛
代码压缩后只有 1.6KB。每添加一个语言平均增加 0.3-0.5KB，主题在 1KB 左右。
快如闪电
如果可能，支持通过 Web Workers 实现并行。
轻松扩展
定义新语言或扩展现有语法，或者新增功能都非常简单。
丰富样式
所有的样式通过 CSS 完成，并使用合理的类名如：ment, .string, .property 等。

第一步：将下面的代码复制到funcations.php中

area data-settings="dblclick" readonly > function add_prism() {wp_register_style('prismCSS', get_stylesheet_directory_uri() . '/prism.css' //自定义路径 ); wp_register_script('prismJS',get_stylesheet_directory_uri() . '/prism.js' //自定义路径 );wp_enqueue_style('prismCSS');wp_enqueue_script('prismJS');}add_action('wp_enqueue_scripts', 'add_prism');area>12345678910111213function add_prism() {wp_register_style('prismCSS', get_stylesheet_directory_uri() . '/prism.css' //自定义路径 );wp_register_script('prismJS',get_stylesheet_directory_uri() . '/prism.js' //自定义路径 );wp_enqueue_style('prismCSS');wp_enqueue_script('prismJS');}add_action('wp_enqueue_scripts', 'add_prism');

以上工作结束后，就可以实现代码高亮了。
对，就这么简单。

第二步：编辑文章时，使用文本模式，输入下面的代码。

area data-settings="dblclick" readonly ><pre ><code > code_here area>1<pre ><code >code_here

（language-c中，红色字体可修改任意语言，但必须保留language-，如language-php）

文件下载
官方网址

提示，打开官方网址后点击右上角蓝色的按钮Download,然后来到下载页面;
页面右侧的几个圆形按钮是用来选择代码样式的；
查看效果在页面底部，然后分类下面css和js样式。
上传到主题的根目录；注意是主题根目录，并非网站根目录；