热文一本正经

emlog修改代码高亮

技术类的博客用到最多的应该就是插入代码了,emlog用的是ckeditor编辑器,默认的代码高亮样子不太好看,而且代码前面的数字显示有问题,就像下面这样的:

代码高亮

最近换了个样式,感觉突出了很多:

代码高亮

食用方法:

1.找到模板文件夹/echo_log.php,插入以下代码:

<!-- 代码高亮开始 -->
<script src="/static/js/prettify.js?ver=2.1" type="text/javascript"></script>
<script type="text/javascript">
    $(function() {
        $('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto');
        window.prettyPrint && prettyPrint();
    });
</script>
<!-- 代码高亮结束 -->

2.找到/admin/editor/plugins/code/prettify.css,把里面的内容注释掉或删掉,添加以下代码:

.prettyprint,
pre.prettyprint {
    background-color: #272822;
    border: 1px solid #272822;
    overflow: hidden;
    padding: 8px;
}
.prettyprint.linenums,
pre.prettyprint.linenums {
-webkit-box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;
-moz-box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;
box-shadow: inset 40px 0 0 #39382E, inset 41px 0 0 #464741;
}
.prettyprint.linenums ol,
pre.prettyprint.linenums ol {
    margin: 0 0 0 33px; 
}
.prettyprint.linenums ol li,pre.prettyprint.linenums ol li {
    padding-left: 12px;
color: #bebec5;
line-height: 20px;
margin-left: 0;
list-style: decimal;
}
.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; }

刷新一下就好了

非特殊说明,本博所有文章均为博主原创,并遵循 CC-BY-NC-SA 4.0 协议许可。
转载前请务必署名,本文链接:https://www.geniusxiaoshuai.com/exp/45.html
-- 展开阅读全文 --
防止网页刷新,禁用F5键的JS
« 上一篇 04-17
网页div跟随屏幕滚动
下一篇 » 04-19

发表评论

作者信息

热门文章

标签TAG

热评文章