• 搜索
  • 夜间模式
    ©2025  Ethan's Blog Theme by OneBlog
    搜索
    标签
    # Amule # Gargoyle # LUCI # VIM # Python # Nginx # 反代 # Ansible # Apache # LNMP
  • 首页>
  • 杂七杂八>
  • 正文
  • Pinghsu主题代码高亮自定义修改

    2018年08月30日 1 阅读 0 评论 1029 字

    用了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 ] 享有,未经作者书面授权,禁止转载,封面图片来源于 [ 互联网 ] ,本文仅供个人学习、研究和欣赏使用。如有异议,请联系博主及时处理。
    — END —
    Copyright©2025  All Rights Reserved.  Load:0.007 s
    Theme by OneBlog V3.6.3
    夜间模式

    开源不易,请尊重作者版权,保留基本的版权信息。