代码
文章转载,请注明出处 H-ui前端框架,网址http://www.h-ui.net/
使用了 google prettify.js 来实现代码的高亮显示。(版权归原创作者所有)
prettify 非常小巧且配置简单,使用它来实现代码的高亮显示是个不错的选择,使用十分简单。
your code
HTML
CSS
JS
<pre class="prettyprint linenums">your code</pre>
code { padding: 0 3px 2px; font-family: Monaco, Menlo, Consolas, "Courier New", monospace; } pre .title, pre .keyword, pre .body, pre .des { color: #333; } /*关键词*/ 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; } pre ol.linenums { margin: 0 0 0 33px; } pre ol.linenums li { padding-left: 12px; color: #bbb; line-height: 18px; text-shadow: 0 1px 0 #fff; } .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 .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; } ol.linenums { list-style: decimal outside none; margin-left: 20px; } ol.linenums li { line-height: 28px; padding-left: 10px; } @media (max-width: 767px) { pre ol.linenums { margin-left: 0; list-style: none; } pre ol.linenums li { padding-left: 0; } .prettyprint.linenums { box-shadow: inset 0px 0 0 #fbfbfc, inset 0px 0 0 #ececf0; } }
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>