WordPress代码高亮软件Enlighter个性化修改

Enlighter 是一款免费、易于使用的 WordPress 语法高亮工具。以提供漂亮的代码外观。使用简单方便，是 WordPress 里不错的代码高亮软件。Enlighter提供了十几种模板主题，可以根据自己喜好进行设置。

一番设置下来，发现每个主题各有特点，不能兼得，好在Enlighter有自定义功能，可以自行修改。本网站代码高亮就是修改后的效果。

WordPress 后台 插件 搜索Enlighter 安装插件 Enlighter – Customizable Syntax Highlighter并启用。

如果直接使用自带主题，直接在Appearance外观设置里将Theme主题设置为喜欢的主题保存即可。要想对主题自定义需要将主题设置为 Theme customizer 自定义。

Theme customizer 里导入主题 dracula 并load 载入，保存修改。

查看效果

可以发现inline内嵌代码前面有空格，背景为黑色，与该处文段不和谐。代码栏目处没有圆角，较为生硬。单行代码没有内边距，看上去很单薄，且复制按钮被切。

首先解决inline内嵌代码前面有空格，这是因为有的主题自动文章段落首行缩进2个文字，也就是加入了 text-indent: 2em;。打开 /wp-content/plugins/enlighter/resources/EnlighterJS.min.css文件，搜索"Courier New",Courier,monospace;font-size:12px; 在后面加入 text-indent:initial; 这句。然后在后台Enlighter 保存修改一下，重新生成css cache文件即可解决上述问题。

以下css代码增加处可以放在WordPress 主题 自定义css 处。

也可以放入 /wp-content/plugins/enlighter/resources/enlighterjs.min.css 文件里。

首先修改inline内嵌代码

/* inline 背景颜色及强制转角3px 强制字体0.9em*/ 
.enlighter-v-inline {
    background-color: #fafafa!important;
    border-radius: 3px!important;
    font-size: 0.9em!important;
}
/* inline文字颜色 */ 
.enlighter-v-inline.enlighter-t-wpcustom .enlighter-text {
    color: #262626;
}

由于原来inline内嵌和code框处css样式是一致的，所以需要单独修改inline内联代码，这里修改了文字颜色及大小，背景色，加入边框。

WordPress 自带有<code> </code>标签，如果你的主题没有对CSS样式设置，<code>标签没有外框及背景色。

<code>标签想加入边框及背景色效果可以用下面的CSS样式。

.entry .entry-content code {
    background: #f0f0f0;
    padding: 2px 4px;
    margin: 0 1px;
    font-size: .9em;
    border-radius: 3px;
    border: solid 1px #e0e0e0;
}

对Enlighter 代码框 区域进行修改：

/* 所有代码页加边框及转角8px */ 
.enlighter-t-wpcustom {
    border-radius: 8px;
    border: solid 1px #e0e0e0;
}
/* 增加上下内边距8px */ 
.enlighter-overflow-scroll.enlighter-v-standard {
    padding: 8px 0 8px 0;
}

这样代码框处就有有了圆角及内边距，感觉更美。效果见下方。

如果觉得代码框处默认代码文字较小，后台 Theme customizer 栏 Defaults 处修改Font size 为 0.9em 或1em。保存让它生效。

代码框处按钮改中文，只能放入 WordPress 主题 自定义css 处。

/* 改文字 */ 
.enlighter-t-wpcustom .enlighter-toolbar .enlighter-btn-copy:after{
	content: '复制';
}
.enlighter-t-wpcustom .enlighter-toolbar .enlighter-btn-window:after{
	content: '新窗口';
}

如提示文字需要改中文的话，打开/wp-content/plugins/enlighter/resources/enlighterjs.min.js文件进行修改。
搜索 Copy to clipboard 改为 复制
搜索 Open code in new window 改为 新窗口打开
后台Enlighter 保存更改一下。

最后完成的效果见图：