在 WordPress 中，可以通过插件或手动添加代码高亮显示。
1. 通过插件添加代码高亮
建议使用 SyntaxHighlighter Evolved 插件来添加代码高亮，步骤如下：
– 在后台的插件中心搜索「SyntaxHighlighter Evolved」并安装。
– 在文章编辑器中选中需要高亮的代码，然后点击文章编辑器的工具栏中的 SyntaxHighlighter 按钮，选择代码类型和主题即可。
2. 手动添加代码高亮
步骤如下：
– 在文章模板文件中加入以下代码
“` html
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/codemirror@5.59.4/lib/codemirror.css”>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/codemirror@5.59.4/theme/material.css”>
<script src=”https://cdn.jsdelivr.net/npm/codemirror@5.59.4/lib/codemirror.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/codemirror@5.59.4/mode/javascript/javascript.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/codemirror@5.59.4/mode/css/css.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/codemirror@5.59.4/mode/htmlmixed/htmlmixed.js”></script>
<script>var editor = CodeMirror.fromTextArea(document.querySelector(‘.my-textarea’), {
mode: ‘text/html’,
theme: ‘material’,
lineNumbers: true,
tabSize: 2,
});</script>
“`
– 在需要高亮的代码块上加上「my-textarea」类名即可，例如：
“` html
<textarea class=”my-textarea”><code class=”language-markup”>
<!– 这里是需要高亮的代码 –>
</code></textarea>
“`
以上是适用于 Markup、CSS 和 JavaScript 的代码高亮方式。如果需要更多主题，可以根据需要引入更多主题 CSS 文件。
