WordPress之代码样式更改

本文主要是简述怎样实现在网页中插入的代码实现高亮显示

小编为了实现类似CSDN中的代码显示，实验了不同的方案，最后得到了一个较好的结果，适用于目前最新版的WordPress 5.2.2

实现的效果如下，如果有一定的前端基础，可以根据个人喜好更改样式。

<html>
<head>
 ....
</head>
<body>
...
</body>
</html>

准备工作

选择或编写高亮样式

有能力的同学可以自己编写样式，WordPress代码主要是由 <pre><code></code></pre> 或者 <code></code> 组成。所以编写标签 <pre> 和标签 <cord> 的样式表CSS就可以了。

小编直接使用了prismjs.com的样式，大家可以到prismjs的下载页选择自己要的效果就行。也可以用小编我使用的文件（点击下载），下载完解压缩会得到 prism.css 和 prism.js 两个文件，放到WordPress主题的根目录（如放在其他地方引用记得更改地址），即：wp安装目录/wp-content/themes/当前使用的主题/

改写functions.php

functions.php位于当前使用的主题目录下，就是 wp安装目录/wp-content/themes/当前使用的主题/functions.php 。

在functions.php文件最后的 ?> 前插入如下代码，没有 ?> 就在最后加上 ?> 。

functions.php

//Wordpress免插件实现代码高亮
//Prism.js开始
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');
//Prism.js结束

如何实现

方法一：改写 prism.css 文件

删去 prism.css 文件里 code 、 pre 后缀 [class*="language-"] 就可以看到效果了。想简便的可以用此方法。

方法二：用自定义HTML区块

WordPress 5.22的自义HTML区块可以直接写代码，格式是 <pre class="line-numbers"><code class="language-markup">自己的代码或者其他</code></pre> 。

<pre> 标签中的 class="line-numbers" 是用来显示行数的，不用可以删去，<code> 标签的class格式是 language-语言 ，若果是HTML使用 class="language-markup" 。

如果中间添加的是HTML代码，使用转义后的代码，即 < 改为 &lt ， > 改为 &gt ，不想转义可以在functions.php文件加入下面代码。

functions.php

//Pre标签内的HTML不转义
add_filter( 'the_content', 'pre_content_filter', 0 );
function pre_content_filter( $content ) {
    return preg_replace_callback( '<pre.*><code.*>(.*)</code></pre>isU' , 'convert_pre_entities', $content );
}

function convert_pre_entities( $matches ) {
    return str_replace( $matches[1], htmlentities( $matches[1] ), $matches[0] );
}