代码

使用了 google prettify.js 来实现代码的高亮显示。(版权归原创作者所有)

prettify 非常小巧且配置简单，使用它来实现代码的高亮显示是个不错的选择，使用十分简单。

your code

HTML代码

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>