在html頁面中實現代碼的高亮顯示

時間 2019-11-14

標籤 html 頁面實現代碼顯示欄目 HTML 简体版

原文原文鏈接

最近在作組內的組件庫，用到代碼的高亮顯示~css

我查到的資料有syntaxhighlighter、highlight.js、prism.jshtml

highlight.js官網 https://highlightjs.org/前端

syntaxhighlighter官網 http://alexgorbatchev.com/SyntaxHighlighter/node

prism.js官網 http://prismjs.com/ 參考資料：http://c7sky.com/syntax-highlighting-with-prismjs.html#0-qzone-1-94908-d020d2d2a4e8d1a374a433f596ad1440git

基本實現原理都是引入須要的JS文件和CSS樣式，將要顯示的代碼封裝在<pre><code></code></pre>標籤中github

syntaxhighlighter效果如圖(shCoreDefault樣式）app

 <link rel="stylesheet" type="text/css" href="../node_modules/syntaxhighlighter_3.0.83/styles/shCoreDefault.css"/>
 <pre class="brush: js;">
      var myCustomFn = function ShowFn() {
        Ext.Msg.alert('消息框', "你調用了客戶端的JavaScript函數");
     }
 </pre>
 <script src="../node_modules/syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
 <script src="../node_modules/syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script>
 <script src="../node_modules/syntaxhighlighter_3.0.83/scripts/shBrushXml.js"></script>
 <script>SyntaxHighlighter.all();</script>

highlight.js效果如圖（default樣式）函數

    <link rel="stylesheet" href="../node_modules/highlight/lib/vendor/highlight.js/styles/default.css"/>
    <script src="../node_modules/highlight/lib/vendor/highlight.js/highlight.pack.js"></script>
    <script>hljs.initHighlightingOnLoad();</script>

   <pre>
       <code class="css">
           @font-face {
           font-family: Chunkfive; src: url('Chunkfive.otf');
           }

           body, .usertext {
           color: #F0F0F0; background: #600;
           font-family: Chunkfive, sans;
           }

           @import url(print.css);
           @media print {
           a[href^=http]::after {
           content: attr(href)
           }
           }
       </code>
   </pre>

prism.js效果圖url

<link rel="stylesheet" href="../css/prism.css"/>
<pre class="language-html">
  <code>
    &lt!DOCTYPE html&gt
    &lthtml lang="en"&gt
    &lthead&gt
    &ltmeta charset="UTF-8"&gt
    &lttitle&gt&lt/title&gt
    &lt/head&gt
    &ltbody&gt
    &ltp&gtkjfeiwjoiefj&lt/p&gt
    &lt/body&gt
    &lt/html&gt
  </code>
</pre>
<script src="../js/prism.js"></script>

咱們的項目前端用的是Anjularjs，聽說用Angularjs和第三方js庫結合的時候會有坑~有待研究。。。spa

後來咱們採用的是Angular-highlightjs，主要是和Angularjs更好的兼容吧~

github上的地址：https://github.com/pc035860/angular-highlightjs

 <link rel="stylesheet" href="../node_modules/highlight.js/styles/github.css"/>
 <script src="../node_modules/highlight.js/highlight.min.js"></script>
<body ng-app="myApp">
   <div hljs>
       @font-face {
       font-family: Chunkfive; src: url('Chunkfive.otf');
       }

       body, .usertext {
       color: #F0F0F0; background: #600;
       font-family: Chunkfive, sans;
       }

       @import url(print.css);
       @media print {
       a[href^=http]::after {
       content: attr(href)
       }
       }

   </div>
 <script src="../node_modules/angular/angular.min.js"></script>
 <script src="../node_modules/angular-highlightjs/angular-highlightjs.min.js"></script>
<script>
    var myApp = angular.module('myApp', ['hljs']);
</script>