jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。
jQueryなど便利なライブラリもいいですが、軽量でカスタマイズ自由自在なオリジナリティあふれるネイティブJavaScriptを書くのもいいかも。

highlight.jsに行番号付加

一覧へ戻る
注意
これらの記事は2016年当時の物で結構古いです。モダンブラウザでは不要な記述やJavaScriptでなくともCSSで実現できる機能もあります。 当時の記録として残してありますがあまり参考になるものではありません。
概要
ライブラリを使わずに自分でコードを書こう!と言っておきながらhighlight.jsでコードを表示させているわけですが、SyntaxHighlighterと違って行番号を表示する機能は有りません。
以下の方法ではhighlight.jsのカスタマイズではなく、行番号を重ねて表示させることで実現させています。
highlight.jsはこちら https://highlightjs.org/
SyntaxHighlighter(http://alexgorbatchev.com/SyntaxHighlighter/)は行番号が表示可能で多機能なのですが動作が重いのでhighlight.jsを使用しています。
使用方法
JavaScriptとcssを適宜追加変更
備考
コードの前半は言語名を表示する処理です。オレンジ座布団に白文字。
すべての環境で行番号がズレなく表示されているか不明です。不備がありましたら教えていただけると幸いです。
 
色合いについては調整可能です。
行番号が1個はみ出していますが、調整方法の変更により、こちらのサイトの様に綺麗に収まります。
https://ao-system.net/note/ 

/**
 * <pre>に重ねて<code>のclass名表示と、行番号表示
 *
 */
(function(document){
	init();
	function init() {
		var pres = document.getElementsByTagName('pre');
		for (var i = 0; i < pres.length; i++) {
			pres[i].style.position = 'relative';
			var div = document.createElement('div');
			div.innerHTML = pres[i].firstChild.getAttribute('class');
			div.style.position = 'absolute';
			div.style.top = '0';
			div.style.left = '0';
			div.style.backgroundColor = '#e61';
			div.style.color = '#fff';
			div.style.fontSize = '13px';
			div.style.padding = '1px 5px';
			pres[i].appendChild(div);
			//
			var div2 = document.createElement('div');
			var h = pres[i].clientHeight;
			var txt = '';
			for (var n = 1; n < parseInt(h / 17); n++) {
				txt += strPad3(n) + '<br>';
			}
			div2.innerHTML = txt;
			div2.style.position = 'absolute';
			div2.style.top = '21px';
			div2.style.left = '6px';
			div2.style.color = '#558';
			div2.style.fontSize = '13px';
			div2.style.lineHeight = '17px';
			pres[i].appendChild(div2);
		}
	}
	function strPad3(str) {
		var len = String(str).length;
		return Array(4 - len).join(' ') + str;
	}
})(document);
	

<pre><code class="JavaScript">
//コード
</code></pre>
	

/* highlight.jsのテーマを少々変更 */
.hljs {
  display: block;
  overflow-x: auto;
  padding: 0.5em 0.5em 0.5em 33px;
  background: #000;
  font-size: 13px;
}
	

pre {
	font-family: 'ＭＳ ゴシック', Consolas, 'Courier New', Courier, Monaco, monospace, sans-serif;
	font-size: 13px;
	line-height: 17px;
}
pre code {
	font-family: 'ＭＳ ゴシック', monospace, sans-serif;
	font-size: 13px;
	line-height: 17px;
}