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

页面导航:首页 > 网络编程 > JavaScript > 使用highlight.js高亮静态页面的语言代码

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

来源: 作者: 时间:2016-02-03 09:20 【

显示静态的代码其实html的pre标签基本可以满足需求了,至少不会将换行的文本显示成一堆字符串。不过能使静态的文本能高亮显示,倒更炫酷一点。其实很简单的,引入highlight js包,可
  显示静态的代码其实的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:>联系我</a></span>
            </div>
          </div>
        </div>
 
      </div>
    </div>
 
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<