Pinghsu主题代码高亮自定义修改


用了Pinghsu主题,但是发现默认的代码高亮样式不好看,虽然不需要任何插件,但是有的代码不会被渲染,看起来觉得不舒服,而使用插件又会跟主题有冲突,于是决定自己改一下。
准备:


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>注释掉。


修改主题的样式表,找到如下代码,把colorbackground-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's Blog|版权所有,违者必究|如未注明,均为原创|本网站采用BY-NC-SA协议进行授权

转载:转载请注明原文链接 - Pinghsu主题代码高亮自定义修改


I love you more than I can say. I love you heart and soul. Why must I love you so much?