显示静态的代码其实html的pre标签基本可以满足需求了，至少不会将换行的文本显示成一堆字符...
显示静态的代码其实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
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，不然我担心博客园找你算账
如果您觉得本文对你有帮助，请竖起您的大拇指右下角点推荐，也可以关注我
版权声明
本文仅代表作者观点，不代表百度立场。
本文系作者授权百度百家发表，未经许可，不得转载。
