<<^^>>努力不一定有回报,不努力一定没有回报。

信息展示

昵称:aliveto 邮箱:some_body@foxmail.com

代码高亮的使用 –highlight

[很sao,很亮的代码就从这篇文章开始!!!!!!!!!!!!!!!!!!]

1.代码高亮的应用

  1. 下载到本地引入。
  2. 利用CDN上的资源,在线引入。

A.下载到本地引入

    • 下载地址https://highlightjs.org/download,选择相应的资源包进行下载。
    • 下载后的文件:
        • 1.styles文件夹里面主要是各种主题的样式,
        • highlight.pack.js主要的js文件
    • 本地引入,路径皆为本地服务器或者本地文件的路径
      
      /*必须要引入jquery*/
      <script src="../jquery.min.js"></script>
      <link rel="stylesheet" href="../styles/default.min.css">
      <script src="../highlight.pack.js"></script>
      
      /*三个文件引入后 在执行两个个脚本*/
      <script>hljs.initHighlightingOnLoad();</script>
      
      <script>
      $(document).ready(function() {
        $('pre code').each(function(i, block) {
          hljs.highlightBlock(block);
        });
      });
      </script>
      
    • 本地使用highlight就算完成啦,赶紧试试吧!!!!

B.引用CDN的资源:

  • 直接应用就可以
    • 
      /*必须要引入jquery*/
      <script src="../jquery.min.js"></script>
      <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
      <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
      
      /*三个文件引入后 在执行两个个脚本*/
      <script>hljs.initHighlightingOnLoad();</script>
      
      <script>
      $(document).ready(function() {
        $('pre code').each(function(i, block) {
          hljs.highlightBlock(block);
        });
      });
      </script>
      

2.以上是两种使用代码高亮的方法:

  1. 个人建议使用cdn,下载到本地,在去请求的话会占用服务器的资源。