显示静态的代码其实html的pre标签基本可以满足需求了，至少不会将换行的文本显示成一堆字符串。
不过能使静态的文本能高亮显示，倒更炫酷一点。其实很简单的，引入highlight.js包，可以使用cdn上的静态资源，引入css和js:
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/styles/default.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/8.4/highlight.min.js"></script>
将要显示的代码包在标签<pre><code class='html'> </code></pre>之间即可。这里的class指的是显示的语言代码，如果是javascript则这里的class='javascript'，highlight几乎支持常见的所有语言。
虽说官网也提供了不显示的高亮的方法，不过我感觉应该很少用到：
<pre><code class="nohighlight">...</code></pre>
在document里还需做下简单处理，方可代码颜色：
<script>hljs.initHighlightingOnLoad();</script>
<script type="text/javascript">
$(document).ready(function() {
$('pre code').each(function(i, block) {
hljs.highlightBlock(block);
});
});
</script>
拿我这个API 申请的Demo举个例子，我指定的是javascript，则显示的value的颜色为褐色。而且格式都保持原样。
静态html如下：
<div class="panel-body">
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title"><B>API Demo</B></h4>
</div>
<div class="panel-body">
<span>输入</span>
<pre><code class="javascript">
options = {
url: 'http://127.0.0.1/apply/testApi',
id:'xxxxxx',
token:'xxx',
user:'xxx'
}
</code></pre>
<br/>
<span>输出</span>
<pre><code class="http">
如:http://127.0.0.1/apply/testApi?id=1550201309061&token=zwSb0hdIJof3WijjLb/sPtO7s4&user=zhoujie
返回:
{
'success': true,
'data': {
'username': 'test',
'password': '123456',
'user': 'zhoujie'
}
}
</code></pre>
<br/>
<span>token申请联系:<a href=mailto:zhoujie@126.com>联系我</a></span>
</div>
</div>
</div>
</div>
</div>
作者：
zhoujie
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，不然我担心博客园找你算账
如果您觉得本文对你有帮助，请竖起您的大拇指右下角点推荐，也可以关注我
