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

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

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

WordPress教程 非插件使用Prism.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文件下载

文件下载

Like
Like Love Haha Wow Sad Angry
1
文章链接: http://wubin.frp.cngrok.com/1000.html
版权声明: 本文由“ 小彬子的自媒体 ”原创,转载请保留出处!
温馨提示: 文章内容仅代表作者个人观点,若由于商用引起版权纠纷,一切责任均由使用者承担!
微信小程序:小彬子的自媒体
关注我们,搜索目的地古镇美食,有趣有料!
200人已关注
分享到:
赞(0) 打赏

评论2

评论前必须

  1. #1

    又可以省一个插件了

    micool2019-12-08 21:27:52

本站现有ripro,lightsns,cosy,7b2,justnews,mnews,Autumn-pro,cute,grace,begin,modown等主流破解主题新版,欢迎下载使用!

立即注册

您的鼓励是我最大的动力!~

支付宝扫一扫打赏

微信扫一扫打赏

WordPress教程 非插件使用Prism.js实现代码高亮-海报