Emlog6 FLY主题不用插件实现代码块高亮 显行号

avatar
avatar
小王先森
378
文章
376
评论
2019年3月21日 4 807

之前一直用 SHJH 精简版代码高亮插件,用起来不太满意,还影响网站体验,于是就自己动手,做了一个非插件实现代码块高亮的效果,还显示行号,关键词不同颜色等。独乐乐不如众乐乐,我把方法分享出来,有缘看到这里的话,你也可以试试哦!

1、需要修改的文件有两个:style.css、header.php、echo_log.php。

2、另需要增加的 JS 有一个:prettify.js(此文件放到 FLY 主题下的 js 目录中即可,文末提供下载)

3、在 header.php 文件中<head>与</head>之前添加如下内容,导入 JS 文件:

<script src="<?php echo TEMPLATE_URL; ?>js/prettify.js?v=<?php echo Option::EMLOG_VERSION; ?>" type="text/javascript"></script>

4、在 echo_log.php 中添加如下代码:

<!-- 代码高亮 -->
<script type="text/javascript">
$(function() {
$(’pre’).addClass(’prettyprint linenums’).attr(’style’, ’overflow:auto’);
window.prettyPrint && prettyPrint();
});
</script>

5、在 style.css 文件的末尾添加如下样式:

.prettyprint,pre.prettyprint {
    background-color: #fafafa;
    border: 1px solid #eee;
    overflow: hidden;
    padding: 8px;
    border-radius: 0;
}
.prettyprint.linenums,pre.prettyprint.linenums {
    -webkit-box-shadow: inset 40px 0 0 #f7f7f9, inset 42px 0 0 #6ce26c;
    -moz-box-shadow: inset 40px 0 0 #f7f7f9, inset 42px 0 0 #6ce26c;
    box-shadow: inset 40px 0 0 #f7f7f9, inset 42px 0 0 #6ce26c;
}
.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: #32cd32; font-style: italic; }
.prettyprint .lit { color: #d06; }
.prettyprint .pun,.prettyprint .opn,.prettyprint .clo { color: #272822; }
.prettyprint .fun { color: #dc322f; }
.prettyprint .str,.prettyprint .atv { color: #fec243; }
.prettyprint .kwd,.prettyprint .tag { color: #9c9cff; }
.prettyprint .typ,.prettyprint .atn,.prettyprint .dec,.prettyprint .var { color: #3387CC; }
.prettyprint .pln { color: #8470FF; }

以上事项做完了,效果就是本站用的这种。

继续阅读
avatar
  • 本文由 发表于 2019年3月21日
  • 除非特殊声明,本站文章均为原创,转载请务必保留本文链接
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:4   其中:访客  3   博主  1
    • avatar 雅轩 3

      看看

      • avatar [email protected] 0

        牛逼:http://www.916dsw.cn