代码
使用了 google prettify.js 来实现代码的高亮显示。(版权归原创作者所有)
prettify 非常小巧且配置简单,使用它来实现代码的高亮显示是个不错的选择,使用十分简单。
your code
HTML代码
<pre class="prettyprint linenums">your code</pre>
CSS代码
pre{display:block;font-family:Monaco,Menlo,Consolas,"Courier New",monospace;padding:9.5px;margin-bottom:10px;font-size:12px;line-height:20px;word-break:break-all;word-wrap:break-word;white-space:pre;white-space:pre-wrap;background-color:#f5f5f5;border:1px solid #ccc;border-radius:4px;color:#333} .prettyprint{margin-bottom:20px;padding:8px;background-color:#f7f7f9;border:1px solid #e1e1e8} .prettyprint .com { color: #998;font-style:italic }/*注释*/ .prettyprint .tag{color:#007}/*标签*/ .prettyprint .lit { color: #195f91} .prettyprint .pun,.prettyprint .opn,.prettyprint .clo { color: #93a1a1}/*等于*/ .prettyprint .fun { color: #dc322f} .prettyprint .str,.prettyprint .atv { color: #D14}/*值*/ .prettyprint .kwd,.prettyprint .prettyprint .tag { color: #1e347b} .prettyprint .typ,.prettyprint .atn,.prettyprint .dec,.prettyprint .var { color: teal}/*文档声明,属性*/ .prettyprint .pln { color: #48484c} .prettyprint.linenums{box-shadow:inset 40px 0 0 #fbfbfc,inset 41px 0 0 #ececf0} .pre-scrollable{max-height:340px;overflow-y:scroll} pre ol.linenums{list-style:decimal outside none;margin:0 0 0 33px} pre ol.linenums li{padding-left:12px;color:#bbb;line-height:18px;text-shadow:0 1px 0 #fff}
JS代码
prettify.js 依赖jquery库。所以需要同时引入 jQuery 文件和 prettify.js 文件
<script type="text/javascript" src="lib/jquery.min.js"></script>
<script type="text/javascript" src="lib/prettify.js"></script>
在 body 标签上添加调用方法
<body onload="prettyPrint()">
</body>