还不是很熟悉JPress插件的编写方式,所以还没有一键安装的插件。这边小编为大家带来一个通用的代码高亮插件。
也就是本站用的,代码风格不错。
1、首先下载 prettify.js ,点我下载 提取码:cgbh
2、添加css样式,建议添加到主题main.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; }
3、然后在网站footer里面加上如下代码:
<script type="text/javascript"> $(function() { $('pre').addClass('prettyprint linenums').attr('style', 'overflow:auto'); window.prettyPrint && prettyPrint(); }); </script>
4、网站贴代码的时候只要使用<pre>标签即可。