wordpress使用Crayon Syntax Highlighter 自定义文本背景

幺九2017年10月15日

(2668)

起因

逛了几个网站后，发现有些网站中的文章，它需要强调的点，都使用了文本背景去高亮，比如

这里可以使用TinyMCE Advanced这款文本编辑器设置字体与字体背景来实现

但我想再自定义这个高亮的代码块，比如边框，圆角等

最终效果

在编写文章的时候，点击文本，然后点击code这个按钮，然后我们在<code></code>便签里面写上我们的代码，然后最终这段文本的效果就是

动手

①先设置好Crayon Syntax Highlighter

进入到Crayon面板，滚动到 [标签] 这个区间，将箭头指向的选择勾上，保存

第一步做完了，那么在文本编辑框里，点击文本后选择code便签，wp就能识别到这个标签。

然后我们发现自带的code标签的样式很丑，一般都为这样的反人类阅读体验，所以我们要修改它的文件。

②修改Crayon主题文件

首先，查看我们的主题是什么，，这里我是obsidian Light这个主题，记着。
变胖。比如现在都还没修改的外观是这样的，隐约能看到背景颜色是吧，我们要将背景变胖，终端或者图形化SFTP客户端进入wordpress根目录，用VI或者SFTP客户端自带的文本器打开/wp-content/plugins/crayon-syntax-highlighter/css/min/crayon.min.css，搜索.crayon-syntax-inline将{}里面的内容更改为margin:0 2px;padding: 0px 3px 0px 2px; 即，文件修改后，一般都要清空浏览器的图片与缓存，然后刷新我们的文章页面，代码块变为
加边。我们要为代码块加入边框，进入wp-content/plugins/crayon-syntax-highlighter/themes文件夹，这个文件夹就是Crayon面板主题列表所有的主题样式，进入我们上面我们的主题文件夹obsidian Light，打开.css后缀的文件，搜索.crayon-theme-obsidian-light(注意，不同的主题，一般就是-obsidian-light这个改为不同的主题名，前面的.crayon-theme不变），在{}里面的最后添加
```
.crayon-theme-obsidian-light {
	color: #e0e2e4;
	margin-bottom: 25px !important;
	background-color: #f8f8ff !important;
	font-size: 100% !important;
	line-height: 130% !important;
	background: #f5f5f5 !important;

	border-style: solid !important;//添加下面这三条语句
	border-width: 1px !important;
	border-color: #dcdcdc !important;
}
```
清空浏览器，刷新文章，代码块变为
背景变色，代码块边框圆角。我们要为代码块改变背景颜色和让代码块边框变圆角。还是在流程3中的文件中搜索,inline，修改{}内容
```
.crayon-theme-obsidian-light-inline {//寻找到的位置
	background: #f9f2f4 !important;//将下面语句覆盖
    	border-radius: 3px;
}
```
清空浏览器，刷新文章，代码块变为
这步可选可不选，虽然第4步后，代码块可观性已足够了，我想让代码块统一颜色，不要有其他颜色。那么还是在流程3中的文件中搜索.crayon-c，然后找到后，将它的[color:#7f7f7f !important]中的!important去掉，看下面的语句，基本结构都一致的，也要全部将!important去掉，直到这里，然后在文档的最后面添加语句
```
.crayon-code{
	color:#c7254e !important;//文字颜色，你自己定义
}

.crayon-code>span{
	color:#c7254e !important;
}
```
添加完后，清空浏览器，刷新文章，就能得到这样的代码块了alt+6