为 wordpress 增加代码高亮功能

感谢 https://highlightjs.org/ 提供的代码高亮 js 与 css，让我们无需插件就可开启代码高亮功能。修改过程如下

修改 footer.php（主题页脚）

在末尾的 </body> 前插入以下代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
<!-- and it's easy to individually load additional languages -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/languages/go.min.js"></script>
<script>hljs.highlightAll();</script>

修改 header.php（主题页眉）

在 <head> 后面插入以下代码，这里是code的样式表，也就是风格，这边选择的风格是 atom-one-dark，更多风格请参考 highlightjs 官网

<!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/styles/default.min.css"> -->
<!-- 使用 "atom-one-dark" 主题 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.3.1/styles/atom-one-dark.min.css">

修改 style.css（样式表）

代码默认的字体大小和行高可能比较低，我们手动调高一点，以方便查看，在末尾处插入下面的css代码就好了

/* 更改代码字体大小 */
.entry-content code, .comment-content code {
    font-size: 0.90rem;
    line-height: 1.5rem;
}

上述步骤操作完，刷新即可查看效果

发表回复取消回复