摘要：最近有好几个人问我使用的是哪个代码高亮插件？其实我并没有使用 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样式。
上传到主题的根目录；注意是主题根目录，并非网站根目录；
