用了Pinghsu主题,但是发现默认的代码高亮样式不好看,虽然不需要任何插件,但是有的代码不会被渲染,看起来觉得不舒服,而使用插件又会跟主题有冲突,于是决定自己改一下。
准备:
- CodeStyle插件
- 代码编辑器
CodeStyle开启monokai-sublime.css样式,不开启行号,目前没有解决,不要开启主题自带的代码高亮和其他代码高亮插件。
首先先移除主题自带的代码高亮样式,避免跟CodeStyle的样式冲突。编辑header.php
,找到<link href="//cdn.bootcss.com/highlight.js/9.10.0/styles/xcode.min.css" rel="stylesheet">
注释掉。
再编辑footer.php
,找到<script src="//cdn.bootcss.com/highlight.js/9.10.0/highlight.min.js"></script>
注释掉。
修改主题的样式表,找到如下代码,把color
和background-color
注释掉
.post-content pre code{
line-height:20px;
margin:0;
padding:1.3em;
/*color:#313131;
background-color:#f7f7f7*/
}
刷新页面再看看代码部分,然后我们发现行内代码背景色还是太淡,不能突显,再改一改
找到如下代码,把background-color
改成如下:
code{
font-family:Menlo,Bitstream Vera Sans Mono,DejaVu Sans Mono,Monaco,Consolas,monospace;
font-size:13px;
margin:0 3px;
padding:2px 6px;
border-radius:3px;
background-color:#ccc
}
再刷新一次,看着就顺眼多了。
本文著作权归作者 [ Ethan ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。