介绍

在wordpress文章中，如何高亮插入的代码块

步骤

以 WordStar 主题为例

修改主题页面

1. 打开theme Editor
2. 编辑header.php
3. 在head标签中插入一下代码 js <link href="https://cdn.bootcss.com/highlight.js/8.0/styles/monokai_sublime.min.css" rel="stylesheet"> <script src="https://cdn.bootcss.com/highlight.js/8.0/highlight.min.js"></script> <script >hljs.initHighlightingOnLoad();</script>
4. 保存

修改样式，隐藏白色边框

1. 打开style.css，搜索 pre {
2. 注释掉 pre { 中的边框部分 css pre { border: 1px solid #d1d1d1; font-size: 16px; font-size: 1rem; line-height: 1.3125; margin: 0 0 10px; max-width: 100%; overflow: auto; /* padding: 1.75em; */ white-space: pre; white-space: pre-wrap; word-wrap: break-word; }
3. 保存并刷新含代码块的文章，便可以看到代码块已经高亮了