Anx's Blog

利用Prism.js为WordPress添加代码高亮功能

WordPress有很多主题都没有代码高亮这个功能,或者是代码高亮的样式并不是自己喜欢的样子。如果要实现代码高亮这个功能,我们一般都是通过插件来实现。最近我在苏醒的博客看到一个利用Prism.js来实现代码高亮的方法,样式看起来比较不错,果断的安装到自己的博客上,感觉还不错。下面简单说一下安装过程。

预处理:删除style.css中关于code的样式

有些主题可能会定义过code的样式,需要先清除掉。如果没有找到,可以忽略掉这一步。以我现在使用的Kratos主题为例,在style.css中找到code样式删除掉。

安装:将下面的代码添加到funcations.php中

function add_prism() {
        wp_register_style(
            'prismCSS', 
            get_stylesheet_directory_uri() . '/css/prism.css' //自定义路径
         );
          wp_register_script(
            'prismJS',
            get_stylesheet_directory_uri() . '/js/prism.js'   //自定义路径
         );
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
    }
add_action('wp_enqueue_scripts', 'add_prism');

上面的css和js文件的位置,请根据自身情况进行修改,代码中默认为 “模板目录/css/prism.css” 和 “模板目录/js/prism.js”

(tips: get_stylesheet_directory_uri 函数为取模板目录)

使用:编辑文章时,在文本模式下输入下面的代码

  <pre class="language-c"><code class="language-c">代码填写在这里</code></pre>  

其中language-c中可以修改语言,例如是php代码,可以修改为language-php,注意“language-”必须保留。

如果需要显示序号,可以在pre的class中添加”line-numbers”,例如 pre class =”language-c line-numbers”

下载地址

官网下载:可以自定义选择主题和语言样式

下面的下载地址是我自己目前在用的样式

本地下载 云盘下载

点赞
  1. First说道:

    第一个评论

发表评论

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

正在加载验证码......

请先完成验证