<pre>で囲ったプログラムコードに行番号を付加する方法
presented by 役に立つかもしれないBlog
以下のように、<pre>中のテキストを改行ごとに取り出し、全体を<ol>でくくり、行単位で<li>を付加することで実現します。
※タグの追加時にわざわざ大小記号とタグキーワードを分けているのは、Safariでの表示バグを回避するためです。
実際にコードを書く際は繋げて書いてもかまいません。
function addCodeNum() {
var pre = document.getElementsByTagName('pre');
for (var i = 0, l = pre.length; i < l; i++) {
var html = '<' + 'ol' + '>';
var text = pre[i].innerHTML.replace(/ /g, ' ');
if (navigator.userAgent.match(/MSIE/)) {
text += "\n";
}
var texts = text.split('\n');
for (var j = 0, m = texts.length-1; j < m; j++) {
if (window.opera && texts[j] == '') {
texts[j] = ' ';
}
html += '<' + 'li' + '>' + texts[j] + '<' + '/li' + '>';
}
pre[i].innerHTML = html + '<' + '/ol' + '>';
}
}
コードを読みやすくするために、スタイルの方も設定してあげましょう。
/* this is program code style. */
pre ol {
list-style-position:inside;
list-style-type:decimal-leading-zero;
}
このページに関連のある記事はこちら
- SeleniumでjQueryを利用する
- JavaScriptでDATETIME型の日付を得る方法
- JavaScriptで全角数字を半角数字に変換する方法（おまけつき）
- tableにjQueryのtoggleを使うと幅が100%に広がらない件
- JavaScript+Prototype.jsで右クリックメニューが作れる「Proto.Menu」
- jQueryでbit.lyと連携。短縮URLをTwitterに投稿してもらう方法
- JavaScriptで日付から「第○曜日」（何番目の曜日か）を調べる方法
- PhoneGapとAppleデベロッパーライセンスの同意事項について
- clickイベントが効かない人への処方箋（iPhone&jQuery）
- HTML5サイトを作らずにはいられない。「HTML5&API入門」
- リンクをクリックさせる前にJavaScript:confirmで確認する時の注意
© colori all rights reserved.