highlight.jsを使ってHTMLでコードをきれいに表示する方法

以前に、Google code-prettifyの使い方について解説しました。もうひとつ、highlight.jsも簡単に使えますので、紹介します。

ダウンロードしないで使う場合

2020年8月29日の時点で、最新バージョンは10.1.2です。

ここから最新のバージョンを確認してください。

以下のコードを</body>タグの手前に記述

 <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/styles/default.min.css">
 <script src="//cdn.jsdelivr.net/gh/highlightjs/cdn-release@10.1.2/build/highlight.min.js"></script>            
 <script>hljs.initHighlightingOnLoad();</script>

以下のようにコードを記述

 <pre><code><div class="img-card"> <!--このように記述しないと1行目が空白になってしまいます。-->
    <img src="../../images/blog/202007/10 (1).JPG" alt="">
    <img src="../../images/blog/202007/10 (2).JPG" alt="">
 </div> </code></pre> //<!--最後の行もこのように記述-->

<pre>や<code>にクラス等何も指定しなくても、自動でHTML,CSS,javascriptなどのコードを判別してくれます。

HTML

 <div class="img-card">
    <img src="../../images/blog/202007/10 (1).JPG" alt="">
    <img src="../../images/blog/202007/10 (2).JPG" alt="">
    <img src="../../images/blog/202007/10 (3).JPG" alt="">
    <img src="../../images/blog/202007/10 (15).JPG" alt="">
 </div>

CSS

  input {
      opacity: 0;
  }
  .wrapper{
      height: 80px;
  }        

Javascript

  <script>    
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById("MenuBtn1").addEventListener("click", function(){
            this.classList.toggle("active");
            document.getElementById("nav1").classList.toggle("active");       
        })
    });
 </script>  

ダウンロードして使う場合

highlight.jsをここからダウンロード

以下のコードを</body>タグの手前に記述

 <link rel="stylesheet" href="xxx.css"><!--お好みのcssを追加-->
 <script src="highlight.pack.js"></script> <!--ダウンロードした中からhighlight.pack.jsを選択-->           
 <script>hljs.initHighlightingOnLoad();</script>

行数を入れたい場合

ここからhighlightjs-line-numbers.jsをダウンロード

3行目と5行目を加えます。

 <link rel="stylesheet" href="xxx.css"><!--お好みのcssを追加-->
 <script src="highlight.pack.js"></script> <!--ダウンロードした中からhighlight.pack.jsを選択-->           
 <script src="highlightjs-line-numbers.js"></script> <!--ダウンロードしたhighlightjs-line-numbers.jsを選択-->            
 <script>hljs.initHighlightingOnLoad();</script> 
 <script> hljs.initLineNumbersOnLoad();</script>

まとめ

highlight.jsの使い方について解説しました。使い方はとても簡単で、CSSも豊富に用意されているので、好みに合ったコード表示が可能です。