Prism.js非插件代码语法高亮
发布于
by
摘要：最近有好几个人问我使用的是哪个代码高亮插件？其实我并没有使用 WordPrees 插件，而是直接使用了一…
摘要：最近有好几个人问我使用的是哪个代码高亮插件？其实我并没有使用 WordPrees 插件，而是直接使用了一个 JavaSc…
最近有好几个人问我使用的是哪个代码高亮插件？其实我并没有使用 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 完成，并使用合理的类名如：.comment, .string, .property 等。
第一步：将下面的代码复制到funcations.php中
|
1
2
3
4
5
6
7
8
9
10
11
12
13
|
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’);
|
以上工作结束后，就可以实现代码高亮了。
对，就这么简单。
第二步：编辑文章时，使用文本模式，输入下面的代码。
|
1
|
<pre class=“language-c”><code class=“language-c”> code_here
|
（language-c中，红色字体可修改任意语言，但必须保留language-，如language-php）
文件下载
官方网址
提示，打开官方网址后点击右上角蓝色的按钮Download,然后来到下载页面;
页面右侧的几个圆形按钮是用来选择代码样式的；
查看效果在页面底部，然后分类下面css和js样式。
上传到主题的根目录；注意是主题根目录，并非网站根目录；
类别：WordPress教程、
本文收集自互联网，转载请注明来源。
如有侵权，请联系 wper_net@163.com 删除。
还没有任何评论，赶紧来占个楼吧！