1.问题背景
一直以来都没去处理安装了Markdown编辑器后,代码无法高亮的问题,趁着今天升级了下Ubuntu,花了点时间来折腾。
最主要的是该插件代码高亮就是使用的prism,所以在编辑阶段的代码会自动使用prism的语法,不需要额外设置。不信你可以查看你文章的html源码,会有下面的语法:
<pre class="language-c"><code class="language-c"> code_here </code></pre>
最新的WP Editor插件已经默认支持prism语法。
2.下载高亮插件
下载地址:https://prismjs.com/index.html
可以选择自己的语言和主题来下载对应的js和css,如下图:
3.加载代码高亮
在主题目录下创建一个prism文件夹,将第2步下载得到的js和css放到该目录
在主题代码function.php最后添加如下代码:
function add_prism() {
wp_register_style(
'prismCSS',
get_stylesheet_directory_uri() . '/prism/prism.css' //自定义路径
);
wp_register_script(
'prismJS',
get_stylesheet_directory_uri() . '/prism/prism.js' //自定义路径
);
wp_enqueue_style('prismCSS');
wp_enqueue_script('prismJS');
}
add_action('wp_enqueue_scripts', 'add_prism');
去刷新下你的文章首页看看吧
- 微信扫码赞助
- 支付宝赞助