导语:对于技术控的朋友来说,平日总要写几段代码来装装逼。市面上也比较多代码高亮插件,各种各样。前段时间改版也没集成代码高亮的功能。今天有点时间就研究了下,发现Prism.js这个轻量级的JavaScript代码高亮很好耍!Prism.JS也大部分流行的编程语言,并且支持多种主题样式,只需要引用CSS文件和JS文件即可完成。好东西要分享,果断分享给大家。

对于技术控的朋友来说,平日总要写几段代码来装装逼。
市面上也比较多代码高亮插件,各种各样。前段时间改版也没集成代码高亮的功能。今天有点时间就研究了下,发现Prism.js这个轻量级的JavaScript代码高亮很好耍!Prism.JS也大部分流行的编程语言,并且支持多种主题样式,只需要引用CSS文件和JS文件即可完成。
好东西要分享,果断分享给大家。
第一步:将下面的代码复制到functions.php中。
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');
以上工作结束后,就可以实现代码高亮了。
对,就这么简单。
第二步:编辑文章时,使用文本模式,输入下面的代码。
<pre class="language-c"><code class="language-c">code_here</code></pre>
(language-c中,红色字体可修改任意语言,但必须保留language-,如language-php)
使用技巧
如果你想每行代码前带序号,只需要在<pre>标签中加class="line-numbers" 即可。
Prism.js文件下载
1
聚合全网优质资源,尽在小彬子的资源站!全站优品,只为传递价值
本站资源均源自互联网,由小彬子收集整理,如果侵犯了您的合法权益,请联系本站2818929499@qq.com我们会及时删除。部分作品由小彬子进行二次创作修改,转载请注明!
本站资源仅供研究、学习交流之用,若使用商业用途,请购买正版授权,否则产生的一切后果将由下载用户自行承担。
未经允许不得转载:小彬子的自媒体 » WordPress教程 非插件使用Prism.js实现代码高亮
- THE END -

微信小程序:小彬子的自媒体
关注我们,搜索目的地古镇美食,有趣有料!
关注小程序不迷路
又可以省一个插件了
6666