搬码资源网广告位 搬码资源网广告位

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

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

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

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

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

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

第一步:将下面的代码复制到funcations.PHP中

functionadd_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');

以上工作结束后,就可以实现代码高亮了。

对,就这么简单。

第二步:编辑文章时,使用文本模式,输入下面的代码。

<preclass="language-c"><codeclass="language-c">code_here</code></pre>

language-c可修改任意语言,但必须保留language-,如language-PHP

使用技巧

如果你想每行代码前带序号,只需要在<pre>标签中加class=”line-numbers” 即可。

Prism.js文件下载地址:http://prismjs.com/

声明:
本站发布的文章及附件仅限用于学习和研究目的;不得将上述内容用于商业或非法用途,否则后果请用户自负。
本站资源来自网络收集,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。
如果您喜欢该程序,请支持正版软件,得到更好的正版服务。
本文链接:https://www.abnma.com/11669.html,转载请注明出处。
如有侵权,请邮件联系我们删除处理。

0
搬码资源网广告位

评论0

请先

没有账号? 注册  忘记密码?