赞助商

WordPress非插件使用Prism.js实现代码高亮

发布时间:2019-06-13 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了WordPress非插件使用Prism.js实现代码高亮脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

对于技术控的朋友来说,平日总要写几段代码来装装逼。

市面上也比较多代码高亮插件,各种各样。前端时间苏醒网站改版也没集成代码高亮的功能。

今天有点时间就研究了下,发现Prism.js这个轻量级的JavaScript代码高亮很好耍!

Prism.JS也大部分流行的编程语言,并且支持多种主题样式,只需要引用CSS文件和JS文件即可完成。

好东西要分享,果断分享给大家。

第一步:将下面的代码复制到funcations.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文件下载地址:http://prismjs.com/

总结

以上是脚本之家为你收集整理的WordPress非插件使用Prism.js实现代码高亮全部内容,希望文章能够帮你解决WordPress非插件使用Prism.js实现代码高亮所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:76874919,请注明来意。