代码

文章转载，请注明出处 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>