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

  • 内容
  • 评论
  • 相关

Prism
对于技术控的朋友来说,平日总要写几段代码来装装逼。
市面上也比较多代码高亮插件,各种各样。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><code class="language-php">  code_here </code></pre>

(language-php中,黄色字体可修改任意语言,但必须保留language-,如language-javascript)

使用技巧

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

关于ajax主题与Prism.js的兼容问题,请阅读《解决Prism.js对无刷新 pjax的支持!

评论

0条评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注