使用 Prism.js 实现美观的代码高亮

本文于741天之前发表,文中内容可能已经过时。如有疑问,请在评论区留言。

背景

  这两天又闲了,觉得wp主题折腾够了,想换个简单点的,大眼一看是很简洁,可是有很多细节需要重新布置,今天先拿代码高亮开涮。

遇到的问题

  • 使用WP Editor.md插件,文章高亮功能失效。
      我切换为官方的主题,文章依旧不能解析markdown内容,理论上这应该是与主题有关的,毕竟现在很多主题有做集成,集成的东西多了冲突自然也多了。但是排查起来没有头脑。
  • 使用Gruber Markdown插件,兼容性不好。
      整体效果还不错,但是我还想更多的自定义一些,所以我把code标签自定义一个css,然后代码高亮部分就全部都乱了。闹心。

    解决

      鉴于以上情况,最终决定使用WP Editor.md仅作为编辑器,使用Prism.js手动添加代码高亮。

  • 首先从Prism官网下载所需的prism.css 和 prism.js 文件,进入相应的主题目录下上传所下载的JS和CSS文件。

  • 文章页引入css及js文件

将下面的代码复制到 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' //你所存放的prism.css文件路径
);
wp_register_script(
'prismJS',
get_stylesheet_directory_uri() . '/prism.js' //你所存放的prism.js文件路径
);
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');

结语

   处理的比较仓促,还有可以优化的部分,比如将css和js按需载入。但是已经满足了我强迫症的心理,所以暂时这样了。
参考:http://blog.skillcat.me/wordpress/85.html

使用netdrive把你的网盘挂载至本地使用(伪离线下载)

  1. 1. 背景
  2. 2. 遇到的问题
  3. 3. 解决
  4. 4. 结语