分享一篇包含有代码段的文章，代码看起来像下面这样的，是不是感觉太平淡，太难看了，读起来还有点吃力?
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的代码外观。
对于显示“压缩级别”的第一部分，请选择“压缩版本”。这将缩短后台代码中使用的文本量，从而使其在您的网站上更快地运行。
接下来，选择要使用的主题。这里我选择了Okaidia主题，可以根据自己的喜好和主题的需求来选择，点击主题后往下拉，可以看到有“Download JS”和“Download CSS”两个大按钮，在这两个按钮的上方有两个代码块，就显示 了所选主题的样式外观，你可以每个都点一下，看看哪个最适合你。
接下来，选择需要的代码语言。
我除了保留了Markup，CSS，C-like和JavaScript的默认值，还选择了PHP，因为WordPress代码段几乎是用PHP编写的。
但是，如果您确定需要使用Python，TypeScript或SQL，则只需选中其中任何一个即可。选择的语言越多，JavaScript和CSS文件就越大，所以，我们尽可能的少选，如果后面发现需要的语言没有选上，可以再返回来添加上的。
再下来是插件部分。
可以通过点击插件名字来了解插件的功能，根据自己的需要来勾选，这里我只选择了“Copy to Clipboard Button”，添加一个“复制”按钮，以便其他人可以轻松地复制代码，将鼠标悬停在代码段上都可以看到。
二、下载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编辑器）。
点击+按钮，添加一个代码块，如下图
然后点击右上方的齿轮设置>区块>高级，在额外的CSS类框入键入language-代码所使用的语言。例如：如果是HTML代码，则将键入language-markup；如果是JavaScript，则将键入language-javascript；如果是PHP，则将键入language-php，依此类推。如下图：
如果不确定在该语言文字之后应输入什么，请查看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>好了，方法到此结束，如果使用过程中有任何问题，可以在评论中提及！