WordPress语法高亮:干掉多出的空行

发现问题

上个月写了一篇有关sftp配置的文章,需要嵌入一些简单的代码。然而,如下图所示,每个代码片段前都会多出一个空行,十分难看。

昨天终于把这个不痛不痒的问题解决了。这里记录一下思路,以备自己学习。

定位问题

我使用的主题是xMag,代码高亮插件是SyntaxHighlighter Evolved,两者都定义了页面样式表。问题肯定出在样式表之间的不兼容。

通过Firefox内置的Inspector,发现罪魁祸首是伪元素div.container::before

该伪元素定义于xMag主题样式表中。

SyntaxHighlighter Evolved插件的样式没有定义该伪元素。

初步方案

在WordPress后台的插件编辑界面,可以看到SyntaxHighlighter Evolved有若干样式表。根据文件名很容易知道,shCore.css是共用的核心样式表。

SyntaxHighlighter Evolved的样式表中可看到一个类.syntaxhighlighter table td.code,适合做伪元素.container::before的父节点。因此,可以在shCore.css中添加一个规则。

.syntaxhighlighter table td.code .container::before {
	content:none !important;
}

刷新文章页面,问题已解决。

理想方案

直接修改插件或主题会带来一些问题。比如,更新插件或主题后,所有的修改都会失效。更好的办法是使用子主题。

幸好,此前我已经做了一个xMag的子主题xMag-Child,以避免xMag对谷歌字体的引用。因此,我将上述新增的规则移到xMag-Child的样式表style.css中。

/*
Theme Name: xMag Child
Description: A child theme of the xMag theme
Author: Jay Wang
Template: xmag
Version: 1.0
*/

.syntaxhighlighter table td.code .container::before {
	content:none !important;
}

当然,理想的方法是把问题反馈给SyntaxHighlighter Evolved的作者。