highlight.jsに行番号を追加する方法
highlight.jsを使ってソースコードを綺麗に表示するだけでも充分なのですが、行番号があるとコードの解説がしやすいですよね。 この記事では、highlight.jsで整えたコード表示に、行番号を入れる方法をまとめました。 開発者さんのGitHub（https://github.com/wcoder/highlightjs-line-numbers.js/）のREADME.mdファイルに導入方法が説明されています。 まだhighlight.jsを導入していない場合は、こちらの記事を先にお読みください＊ ライブラリの読み込み <head></head>タグ内で読み込んでいる highlight.js コードの部分を下記のように変更します。 変更前 <!-- highlight.js: コードのハイライト --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script> <script>hljs.highlightAll();</script> 変更後 <!-- highlight.js: コードのハイライト --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/styles/github.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.1/highlight.min.js"></script> <!-- highlightjs-line-numbers.js: 行番号の追加 --> <script src="//cdnjs.cloudflare.com/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script> <script> hljs.highlightAll(); hljs.initLineNumbersOnLoad(); //行番号用の起動コードを追加 </script> 上記のように行番号表示用のコードを入れると、私の場合はこのようになりました。 CSSでデザインを整える 枠線や数字の幅などいろいろと気になったので、私の場合は下記のようにデザインを変更しました。 /* 枠線の削除 */ .hljs-ln { margin-bottom: 0; border: none; } .hljs-ln tr, .hljs-ln td { border: none; } /* 行番号 */ .hljs-ln-numbers { font-family: inherit; -webkit-touch-callout: none; /* スマホ等で長押しで表示されるポップアップメニューの非表示 */ -webkit-user-select: none; /* コードコピー時に行番号が除外されるようにする */ -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; text-align: center; color: #ccc; /* 行番号の色 */ vertical-align: top; padding-right: 10px; width: 2rem; /* 番号の幅 */ min-width: 2rem; /* 番号の最低幅 */ } .hljs-ln-code.hljs-ln-line { …
