プログラムコードに行番号を表示したかったので、はてなブログのカスタマイズの勉強がてら作成してみました。
出来上がりは以下のような感じ。
let hello = "Hello!"; console.log(hello+"行番号!");
ブログデザインのカスタマイズで、フッターにJavaScriptを追加と、奇数行の背景色が変わるようにCSSを設定しました。
(2017/4/15 フリープランのスマホレイアウトだとフッターにJavaScriptが設定できず、行数指定がおかしくなるので// 数字:
の書式を追加)
以下、手順です。
手順
はてなにログインしたら、(1)アカウントをクリック > (2)ブログを選択 > (3)デザインをクリックします。
デザイン設定画面に切り替わるので、(1)設定アイコン > (2)フッタ > (3)その下のコードをクリックします。
「HTML を記述できます」の欄に、以下のコードを入力します。
<script> let codes = document.getElementsByClassName('code'); [].forEach.call(codes, function(elem, key, val){ // クラスに lang が含まれていない場合は何もしない if (!/lang/.test(elem.className)) { return; } let line_num = 1; // 行で分割 let lines = elem.innerHTML.split("\n"); let texts = elem.textContent.split("\n"); // 最終行が空の時は削除 if (lines[lines.length-1].length === 0) { lines.pop(); } // 最初の1行目にコメント後の数字:か、数字:があれば、先頭の行番号にする(2017/4/15修正) if ((texts.length > 0) && (/(^|\/\/|\/\*) *[0-9]+:/.test(texts[0].trim()))) { line_num = texts[0].trim().replace(/:/, "").replace(/(\/\/|\/\*)/, "")-0; lines.shift(); } let modi = "<ol start='"+line_num+"'>"; lines.forEach(function(elem) { modi += "<li class='code-list'>"+elem+"</li>"; }); modi += "</ol>"; elem.innerHTML = modi; }); </script>
コードの奇数行用のCSSを設定します。(1)デザインCSSをクリックしたら、(2)下のコード部分をクリックして開きます。
以下のCSSを追加します。
.code-list:nth-child(2n+1) { background-color: #eee; }
最後に、保存をクリックします。
以上です。
やっていること
JavaScriptで、code
クラスの要素を列挙します。列挙した要素のうち、lang
というクラス名を含んでいたら、全体をol
タグで囲んで、各行をli
タグで囲みます。li
タグにはcode-list
クラスを設定しているので、CSSの.code-list:nth-child(2n+1)
に背景色を指定して、奇数行に色をつけています。
クラス名にlang
が含まれていないのは、言語指定をしていないブロックです。自分の場合、コマンドラインの指示などは言語指定をしておらず、その場合は行番号を表示したくなかったので、このようなコードを追加しました。
また、コードブロックの最初に// 10:
などのように、//
+<数字>+:
の行を書いておくと、その数字から行番号が始まるようにしました。
// 10: // 10から開始
上記のようなコードを、言語指定付きで書くと以下のようになります。
// 10: // 10から開始
参考URL
- はてなのシンタックスハイライトに行番号をつける - 7cc@はてなブログ
- 番号は
ol
タグでつければいいのか!というのが大変参考になりました。この前は強引にテーブルでやろうとして面倒なことになりかけてました^^;
- 番号は