読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

プログラミングについてのメモ。

はてなブログのプログラムコードに行番号を表示する(2017/4/15修正)

プログラムコードに行番号を表示したかったので、はてなブログのカスタマイズの勉強がてら作成してみました。

出来上がりは以下のような感じ。

let hello = "Hello!";
console.log(hello+"行番号!");

ブログデザインのカスタマイズで、フッターにJavaScriptを追加と、奇数行の背景色が変わるようにCSSを設定しました。

(2017/4/15 フリープランのスマホレイアウトだとフッターにJavaScriptが設定できず、行数指定がおかしくなるので// 数字:の書式を追加)

以下、手順です。

手順

はてなにログインしたら、(1)アカウントをクリック > (2)ブログを選択 > (3)デザインをクリックします。

f:id:am1tanaka:20170407230957p:plain

デザイン設定画面に切り替わるので、(1)設定アイコン > (2)フッタ > (3)その下のコードをクリックします。

f:id:am1tanaka:20170407231206p:plain

「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)下のコード部分をクリックして開きます。

f:id:am1tanaka:20170407231839p:plain

以下のCSSを追加します。

.code-list:nth-child(2n+1) {
    background-color: #eee;
}

最後に、保存をクリックします。

f:id:am1tanaka:20170407232124p:plain

以上です。

やっていること

JavaScriptで、codeクラスの要素を列挙します。列挙した要素のうち、langというクラス名を含んでいたら、全体をolタグで囲んで、各行をliタグで囲みます。liタグにはcode-listクラスを設定しているので、CSS.code-list:nth-child(2n+1)に背景色を指定して、奇数行に色をつけています。

クラス名にlangが含まれていないのは、言語指定をしていないブロックです。自分の場合、コマンドラインの指示などは言語指定をしておらず、その場合は行番号を表示したくなかったので、このようなコードを追加しました。

また、コードブロックの最初に// 10:などのように、//+<数字>+:の行を書いておくと、その数字から行番号が始まるようにしました。

    // 10:
    // 10から開始

上記のようなコードを、言語指定付きで書くと以下のようになります。

    // 10:
    // 10から開始

参考URL