如何添加Prism.js代码语法高亮到WordPress网站(非插件)

分享一篇包含有代码段的文章,代码看起来像下面这样的,是不是感觉太平淡,太难看了,读起来还有点吃力?

window.onload = function() {
    var show = document.getElementById("show");
    setInterval(function() {
        var time = new Date(); // 程序计时的月从0开始取值后+1  
        var m = time.getMonth() + 1;
        var t = time.getFullYear() + "-" + m + "-" +
            time.getDate() + " " + time.getHours() + ":" +
            time.getMinutes() + ":" + time.getSeconds();
        show.innerHTML = t;
        //console.info(t);
    }, 1000);
};

如果能像下面这样的,就像在代码编辑软件里面书写的一样,看起来是不是很OK:

window.onload = function() {
    var show = document.getElementById("show");
    setInterval(function() {
        var time = new Date(); // 程序计时的月从0开始取值后+1  
        var m = time.getMonth() + 1;
        var t = time.getFullYear() + "-" + m + "-" +
            time.getDate() + " " + time.getHours() + ":" +
            time.getMinutes() + ":" + time.getSeconds();
        show.innerHTML = t;
        //console.info(t);
    }, 1000);
};

为了实现它,我搜索了WP官方插件市场,找到了几个相关的插件,尝试了两个评价好的插件,却感觉不太如人意。又用谷歌搜索了一下,发现了Prism.js,它完美的实现了我的需求!

Prism非常轻巧,构建时考虑了现代Web标准,最棒的是,不需要插件。

步骤如下:

一、首先,打开Prism下载页面。您会看到类似以下页面的页面:

prism.js

在这里看到了一大堆选项,可以选择这些选项来自定义Prism的代码外观。

对于显示“压缩级别”的第一部分,请选择“压缩版本”。这将缩短后台代码中使用的文本量,从而使其在您的网站上更快地运行。

接下来,选择要使用的主题。这里我选择了Okaidia主题,可以根据自己的喜好和主题的需求来选择,点击主题后往下拉,可以看到有“Download JS”和“Download CSS”两个大按钮,在这两个按钮的上方有两个代码块,就显示 了所选主题的样式外观,你可以每个都点一下,看看哪个最适合你。

接下来,选择需要的代码语言。

我除了保留了Markup,CSS,C-like和JavaScript的默认值,还选择了PHP,因为WordPress代码段几乎是用PHP编写的。

但是,如果您确定需要使用Python,TypeScript或SQL,则只需选中其中任何一个即可。选择的语言越多,JavaScript和CSS文件就越大,所以,我们尽可能的少选,如果后面发现需要的语言没有选上,可以再返回来添加上的。

再下来是插件部分。

可以通过点击插件名字来了解插件的功能,根据自己的需要来勾选,这里我只选择了“Copy to Clipboard Button”,添加一个“复制”按钮,以便其他人可以轻松地复制代码,将鼠标悬停在代码段上都可以看到。

Prism Plugins

二、下载Prism JS和CSS文件

点击下方两个大大的“ Download JS ”和“ Download CSS ”按钮,将会下载prism.js和prism.css两个文件,将它们保存在本地计算机上的某个位置。

三、上传prism.js和prism.css文件到主题或子主题的文件夹

最好是使用子主题,因为如果是直接使用主题,那么当主题升级的时候,相应的修改都会被替换掉,所以最好是使用子主题,这样主题无论怎么升级,都不会影响到你子主题所做的修改。

使用FTP或是直接登录到主机后端(比如cPanel),然后将前面下载的prism.js和prism.css两个文件,上传到主题的文件夹wp-content/themes/your-theme-name,比如我用的是neve子主题,就是上传到wp-content/themes/neve-child-master。

四、添加PHP函数以加载Prism

下面要做的是如何让浏览器在需要的时候加载Prism,不是所有的页面都加载哦!

将下面这段代码加入到子主题的functions.php文件(为避免升级时丢失父主题functions.php文件所做的修改,请永远不要修改父主题的functions.php文件)。

//Add prism.css and prism.js
function add_prism() {
    if (is_single() && has_tag('code')) {
        // Register prism.css file
        wp_register_style(
            'prismCSS', // handle name for the style 
            get_stylesheet_directory_uri().
            '/prism.css' // location of the prism.css file
        );
        // Register prism.js file
        wp_register_script(
            'prismJS', // handle name for the script 
            get_stylesheet_directory_uri().
            '/prism.js' // location of the prism.js file
        );
        // Enqueue the registered style and script files
        wp_enqueue_style('prismCSS');
        wp_enqueue_script('prismJS');
    }
}
add_action('wp_enqueue_scripts', 'add_prism');

使用is_single()意味着Prism文件仅加载到博客文章上,这意味着主页和常规页面(如关于和联系信息)不会加载文件-是不是非常棒!

使用&& has_tag('code')意味着,只有带有“code”标签的博客文章才加载。这样,就可以专门针对包含代码段的博客文章。这也意味着Prism文件不会加载到不需要它们的博客文章中,例如没有代码片段的博客文章。

五、在WordPress的Gutenberg和Classic Editor中使用Prism

前面准备工作都做好了,下面就是具体的使用了。

WordPress Gutenberg编辑器:

如果是新的WordPress Gutenberg编辑器,请遵循以下方法。说到这,听说Classic编辑器仅在2021年年底之前受支持,所以大家都要学习使用新的WordPress Gutenberg编辑器(弱弱的说一句,我至今还是使用Classic编辑器,不习惯Gutenberg编辑器)。

点击+按钮,添加一个代码块,如下图
Wordpress Code Block

然后点击右上方的齿轮设置>区块>高级,在额外的CSS类框入键入language-代码所使用的语言。例如:如果是HTML代码,则将键入language-markup;如果是JavaScript,则将键入language-javascript;如果是PHP,则将键入language-php,依此类推。如下图:
Wordpress Code Block Set

如果不确定在该语言文字之后应输入什么,请查看PrismJS网站上支持的语言部分

代码块在Gutenberg编辑器中看起来仍然不是高亮的代码样式,但是前台显示已经是高亮了!

另外,如果是在Gutenberg段落中使用了该选项,那么一样将适当的CSS类添加到段落块中。

WordPress经典编辑器:

在使用WordPress在经典编辑器中撰写博客文章时,只需使用“文本”模式。在文本模式下是可以书写HTML的,在代码块的前后加上<pre><code标签。
参考下面的例子:

<pre><code class="language-css">
a:hover, a:focus {
  text-decoration: underline;
  color: #0366d6;
}
</code></pre>

好了,方法到此结束,如果使用过程中有任何问题,可以在评论中提及!

发表评论

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