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

highlight.jsに行番号付加

概要
ライブラリを使わずに自分でコードを書こう!と言っておきながらhighlight.jsでコードを表示させているわけですが、SyntaxHighlighterと違って行番号を表示する機能は有りません。
以下の方法ではhighlight.jsのカスタマイズではなく、行番号を重ねて表示させることで実現させています。
highlight.jsはこちら https://highlightjs.org/
SyntaxHighlighter(http://alexgorbatchev.com/SyntaxHighlighter/)は行番号が表示可能で多機能なのですが動作が重いのでhighlight.jsを使用しています。
使用方法
JavaScriptとcssを適宜追加変更
備考
コードの前半は言語名を表示する処理です。オレンジ座布団に白文字。
すべての環境で行番号がズレなく表示されているか不明です。不備がありましたら教えていただけると幸いです。

/**
 * <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: 'MS ゴシック', Consolas, 'Courier New', Courier, Monaco, monospace, sans-serif;
	font-size: 13px;
	line-height: 17px;
}
pre code {
	font-family: 'MS ゴシック', monospace, sans-serif;
	font-size: 13px;
	line-height: 17px;
}
	
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
このサイトでお気付きの点がございましたら
ご連絡いただけますと幸いです。
 
Eメール(任意)
送信内容
 
便




top of page