使用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:[e-mail]>聯系我</a></span>
            </div>
          </div>
        </div>

      </div>
    </div>