highlight.js - Javascript

  • 作成日：
  • 最終更新日：2025/10/08

highlight.js とは？

プログラミング言語（JavaScript, Python, HTML, CSS, Java, C++, Rubyなど）やマークアップ言語の構文ハイライト表示するためのJavaScriptライブラリです。。

highlight.jsを CDN を利用して読み込むには、以下のようにします。

# javascript
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/highlight.min.js" integrity="sha512-EBLzUL8XLl+va/zAsmXwS7Z2B1F9HUHkZwyS/VKwh3S7T/U0nF4BaU29EP/ZSf6zgiIxYAnKLu6bJ8dqpmX5uw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
# CSS
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.11.1/styles/default.min.css" integrity="sha512-hasIneQUHlh06VNBe7f6ZcHmeRTLIaQWFd43YriJ0UND19bvYRauxthDg8E4eVNPm9bRUhr5JGeqH7FRFXQu5g==" crossorigin="anonymous" referrerpolicy="no-referrer" />

javascript や css のテーマを変更したい場合は、サイトから好みのものを選択できます。

highlight.js に行番号を追加する

highlight.jsは、標準では行番号は表示されない為、プラグインを作成して機能を追加します。

行番号を追加したい pre タグにdata-linenumber="true"属性をつけて行番号を表示することができます。

javascript

document.addEventListener('DOMContentLoaded', () => {
  (function(){
    hljs.highlightAll(); // 先にハイライト
    document.querySelectorAll('pre.line-numbers[data-linenumber="true"]').forEach(pre => {
      const codeEl = pre.querySelector('code');
      if (!codeEl) return;

      const raw = codeEl.textContent.replace(/\n+$/, '');
      const lines = raw.split('\n');

      const numberWrapper = document.createElement('span');
      numberWrapper.className = 'line-numbers-rows';

      lines.forEach((_, i) => {
        const number = document.createElement('span');
        number.className = 'line-number';
        number.textContent = i + 1;
        numberWrapper.appendChild(number);
      });

      pre.insertBefore(numberWrapper, pre.firstChild);
    });
  })();
});

CSS

pre.line-numbers {
  position: relative;
  padding-left: 3em;
}
.line-numbers-rows {
  position: absolute;
  left: 0;
  top: 0;
  width: 2.5em;
  text-align: right;
  color: #555;
  border-right: 1px solid #ccc;
  user-select: none;
  padding: 1em 0;
  margin-right: 0;
}
.line-number {
  display: block;
  padding-right: 4px;
}

HTML

<pre class="line-numbers" data-linenumber="true"><code>function hello(){
  console.log("Hello, World!");
}</code></pre>