优雅解决WP代码高亮问题

代码块高亮

我现在使用的是Sakurairo主题，它内置提供了多种代码高亮方法：

这部分的设置可以在 iro主题设置 —— 其他设置 —— 低使用设置 —— 代码高亮这里找到。

然而，highlightjs 有时候自动识别的很不准确，就导致渲染出来的代码很难看。所以最后决定，还是应该针对代码块手动设置其语言，至少需要知道如何实现这么一个方法。

寻找了很多教程：

最后发现，他们归根结底都是同一个渲染逻辑：在<code>标签中标记class，来指定语言。

比如说，需要作为python显示代码，那么示例如下：

<pre><code class="language-python">print('Hello World!')</code></pre>

这段代码的显示效果就是下面这样的，指定了语言为python：

print('Hello World!')

这样，结合<pre>以及<code>两个标签，就能知道需要解析的代码块，同时依据其class进行高亮。highlightjs 在没有指定的时候还可以自动识别，就是不是很准确。

然而，现在的Wordpress使用的是可视化编辑器（就是那个“古腾堡编辑器”），无法很好的编辑html代码。此外，把代码块转换为html编辑后，可视化编辑器不能正确解析我们手动添加的class="language-python"字段，会认为这是一个错误！

怎么办呢，最后找到了可视化编辑器的一个高级功能。点击右上角打开侧边栏，选择区块，找到“高级”一栏，可以在这里自定义css样式。没错！就是这里，在这里指定代码语言即可。

不过，该方法有一个小缺陷，这应该是可视化编辑器设计带来的问题，就是<pre>标签也会带上这个css样式。

今天把旧文章的样式都给梳理了一遍，真是累死了。

由于对大部分常用的语言，两种js默契的使用了相同的css样式名称，所以该方法在多数情况下对两种js都可以生效。也有少部分语言，比如windows的BAT脚本，没有一致的支持。这个时候也可以把它当做shell等来解析。

这里给出 “language-xxx” 的取值范围。

请注意在输入框中输入的应该是类名，不应该包含class和引号。

打开源代码模式，检查是否有code标签的嵌套