落絮飞雁

顺流而下,把梦做完

为wp-code-highlight添加新配色

时隔近半年,终于把这个坑填上了……

之前发过一篇 代码高亮插件WP-Code-Highlight 样式美化,其中提到了一种新的配色主题。但是因为太懒 一直没有解决掉行号的显示问题。今天优化了一下这个主题,顺手取名字叫dawn(拂晓)了。并且添加到了插件的后台设置中,可以从后台中方便的启用。

GitHub的地址在这里:wp-code-highlight。给作者发了Pull-request了,但是感觉作者貌似不经常用GitHub,干脆介绍下使用方法好了。

修改功能:

  • 修复了行号显示异常的问题。
  • 添加了新主题dawn。
  • 添加对Source Code Pro 字体支持。
  • 使用方法:

    这个页面右下角找到 download zip 下载后上传至WP后台即可。可在插件后台设置启用新主题。

    dawn.css

    .prettyprint,
    pre.prettyprint {
        background-color: #000;
        font-family:Source Code Pro,inherit;
        border: none;
        overflow: hidden;
        padding: 10px 15px;
    }
    .preprint.ol.linenums li{line-height:16px;margin:0px;padding:5px;list-style:none;}
    .preprint.ol.linenums li:before,ol.linenums li:after{content:none;}
    .preprint.ol.linenums li{margin:0;padding-left:27px;color:#ff0000;}
    .preprint.ol.linenums li.L0,ol.linenums li.L0,ol.linenums li.L1,ol.linenums li.L2,ol.linenums li.L3,ol.linenums li.L4,ol.linenums li.L5,ol.linenums li.L6,ol.linenums li.L7,ol.linenums li.L8,ol.linenums li.L9{
    	list-style-type:decimal;
    	color:#FF0000;
    }
    .preprint.ol.linenums li.L0,ol.linenums li.L1,ol.linenums li.L3,ol.linenums li.L5,ol.linenums li.L7,ol.linenums li.L9{
    	list-style-type:decimal;
            background-color: #191919;
    }
    .prettyprint .com { color: #93a1a1; }
    .prettyprint .lit { color: #AE81FF; }
    .prettyprint .pun,
    .prettyprint .opn,
    .prettyprint .clo { color: #F8F8F2; }
    .prettyprint .fun { color: #dc322f; }
    .prettyprint .str,
    .prettyprint .atv { color: #E6DB74; }
    .prettyprint .kwd,
    .prettyprint .tag { color: #F92659; }
    .prettyprint .typ,
    .prettyprint .atn,
    .prettyprint .dec,
    .prettyprint .var { color: #A6E22E; }
    .prettyprint .pln { color: #66D9EF; }
    

    原文标题:为wp-code-highlight添加新配色|落絮飞雁的个人网站
    原文链接:https://www.luoxufeiyan.com/2015/06/28/new-wp-code-highlight-theme/
    授权协议:创作共用 署名-非商业性使用 2.5 中国大陆
    除注明外,本站文章均为原创;转载时请保留上述链接。