前言

最近图新鲜新搭建了一个Wordpress博客，试用了不少代码高亮的插件，最后还是选择了SyntaxHighlighter Evolved。因为它对wordpress的block支持的比较好，但是在使用的过程中发现，高亮的代码上下左右间距太紧密了。

在这之前

先看一下优化调整之前的效果：

在这之后

再来看一下调整之后的效果：

可以很明显的就好看了很多，上下以及左边的间距都加大了一些。

调整

好了，最后再来说一下如何调整，找到wordpress插件源码文件：

wp-content/plugins/syntaxhighlighter/syntaxhighlighter3/styles/shCore.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.syntaxhighlighter textarea {
  -moz-border-radius: 0 0 0 0 !important;
  -webkit-border-radius: 0 0 0 0 !important;
  background: none !important;
  border: 0 !important;
  bottom: auto !important;
  float: none !important;
  height: auto !important;
  left: auto !important;
  line-height: 1.1em !important;
  margin: 0 !important;
  outline: 0 !important;
  overflow: visible !important;
  padding: 0 !important;
  position: static !important;
  right: auto !important;
  text-align: left !important;
  top: auto !important;
  vertical-align: baseline !important;
  width: auto !important;
  box-sizing: content-box !important;
  font-family: Monaco, "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important;
  font-weight: normal !important;
  font-style: normal !important;
  font-size: 1em !important;

主要是修改left和line-height属性，修改之后：

1
2
left: 0.5em !important;
line-height: 1.51em !important;

最后保存该文件即可，当然也可以调整为适合自己的样式。