实现代码高亮 推荐使用google-code-prettify

作者:norion时间:2015年3月13日评论次数:0 条

代码高亮工具之前在网上找了好久都没有找到简单易用的,直到上次做项目时写前端文档时找到了google-code-prettify,今天终于找了个时间把这个东西放到我的主题里面,用法简单,只要在页面上引入如下代码:

<script type="text/javascript" src="http://zkeyword.com/wp-content/themes/zkeyword/js/jquery.min.js"></script>
<script type="text/javascript" src="http://zkeyword.com/wp-content/themes/zkeyword/js/prettify.js"></script>

然后在页面上调用:

$('pre,.prettyprint').addClass('prettyprint linenums').attr('style', 'overflow:auto');
window.prettyPrint && prettyPrint();

然后添加相应的样式:

.prettyprint,
script.prettyprint {
 background-color: #272822;
 border: 1px solid #272822;
 overflow: hidden;
 padding: 8px;
 margin:0 0 15px;
}
.prettyprint.linenums,
script.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,
script.prettyprint.linenums ol {
 margin: 0 0 0 33px; 
}
.prettyprint.linenums ol li,
script.prettyprint.linenums ol li {
 padding-left: 12px;
 color: #bebec5;
 line-height: 20px;
 margin-left: 0;
 list-style: decimal;
}

.prettyprint,
pre.prettyprint {
 background-color: #272822;
 border: 1px solid #272822;
 overflow: hidden;
 padding: 8px;
 margin:0 0 15px;
}
.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; }

就可以直接在pre标签上写上你要高亮的标签即可,至于源码的话,可以直接拷贝我网站上的js,样式方面你可以再做调整。

上一篇: 备案成功网站迁移到国内

下一篇:关于less、sass、stylus等css扩展语言之争

相关文章

评论

发表评论

电子邮件地址不会被公开。 必填项已用*标注