使用highlight.js高亮静态页面的语言代码

　　显示静态的代码其实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&amp;token=zwSb0hdIJof3WijjLb/sPtO7s4&amp;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>