はてなブログでのソースコード表示に行番号を追加する方法

f:id:kirintt:20171027011332j:plain

以前、はてな記法を使ってソースコードを表示する方法を記事にしました。

しかし、はてな記法を使う方法では、行の番号が表示されません。
プログラミングのお勉強記事が増えて来るにつれて、ソースコードに行番号があったら嬉しいなと思うことが多くなったので、今回はその方法を調べてみました。

いくつかのサイトを見て回りましたが、ここが自分みたいなプログラミング初心者にはいちばんわかりやすかったです。
こちらを読んで、手順通りやれば問題ないかと思います！

先のサイトでは奇数行と偶数行で色を分けることでコードを見やすくしています。
手順を読んでいくとわかりますが、デザイン CSSに追加されたコード（以下）によって奇数行の色が変更されます。

.code-list:nth-child(2n+1) {
    background-color: #eee;
}
tanaka's Programming Memoより引用

具体的には、
background-color: #eee;
の赤字部分が色の種類を示しています。
ここをいじることで、色を変更できます。
色の種類については、例えば下記のサイトが参考になります。

また、ソースコード全体の背景色を変更したい場合はデザイン CSSに以下のコードをコピペすればOKです。

.entry-content pre.code { background-color:#f9f9f9;}

具体的には、
.entry-content pre.code { background-color:#f9f9f9;}
の赤字部分が色の種類を示しています。
ここをいじることで、色を変更できます。

背景色以外にも、ソースコードのテキストなどの色を変更することができます。
詳しくは下記サイトが参考になると思います。
orangain.hatenablog.com

GitHubという外部サイトによって行番号付きのソースコードを載せるという方法もあります。
下記でわかりやすく紹介されています。

読んでいただくとわかりますが、手順だけなら多分いちばん簡単だし楽です。
ただ、個人的には外部サイトを通しての表示には以下のような懸念事項があるため、採用を見送りました。

まぁ心配のしすぎだとは思いますが…。

今回は、はてなブログでのソースコード表示に行番号を追加する方法＋αを紹介しました。
自分にとっても前より見やすいブログになったので良かったです！みなさんもぜひお試しください！！

すぐ影響されるブログ