
wordpress使用Crayon Syntax Highlighter 自定义文本背景
起因
逛了几个网站后,发现有些网站中的文章,它需要强调的点,都使用了文本背景去高亮,比如
这里可以使用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
若觉得文章不错的话,请留言让我知晓。 🙂