ページ内で行番号付きと無しのソースコードを混在させる方法

記事の中でソースコードを掲載することが度々あるのですが、現在使用しているCocoonテーマの設定で、ソースコードに行番号を表示していますが、これは全てのコードに対して自動的に1から順に番号を振る設定になっています。この機能は見やすく非常に便利ですが、行番号を表示したくないケースもあります。そこで、行番号を非表示にする方法を探してみました。

“自転車健康生活 よっさん“のサイトで紹介されていたので、早速、その方法を取り入れることにしました。

CSSにコードを追加するだけ

子テーマのCSSファイルに下記コードを追加、またはページのカスタムCSSに追加。

/* ソースコードを行番号なしにする */
.is-code-row-number-enable pre.nocode::before {
	content: "";
}
.is-code-row-number-enable pre.nocode {
	padding: 1em;
}

番号がなくなって左に寄りすぎると思ったらpaddingで余白の設定を行います。
とりあえず　1emにしてみました。
今回はいつでも使えるように子テーマのCSSに追記をしました。
もしページごとに行いたいのであれば個々のページでカスタムCSSに追記を行えばOKです。

番号を表示したくないブロックを選択し高度な設定にある”追加CSSクラス”に”nocode”を記入します。

すると⬇︎のように番号が表示されなくなります。

/* ソースコードを行番号なしにする */
.is-code-row-number-enable pre.nocode::before {
	content: "";
}
.is-code-row-number-enable pre.nocode {
	padding: 1em;
}

これで番号付きとつかないものを混在させることができるようになります。

ソースコードの行番号を任意の番号にする

せっかくなので好きな番号から始めることはできないか？
色々と探しているとPercredereさんのサイトで紹介されていたので参考にさせいただきました。
下記コードをページでカスタムCSSに追記を行います。

.is-code-row-number-enable pre.spcode::before {
	content: "10\a 11\a 12\a 13\a 14\a 15\a 16\a";
}

今回は10番から16番までの番号を振り分けます。
追加CSSクラスはspcodeにしてありますが自分の好きなクラス名にしてください。

次に番号を指定したいブロックを選択し高度な設定にある”追加CSSクラス”に”spcode”を記入します。すると無事番号を指定して表示できるようになりました。行数が多いと大変ですが、少ない行数ならなんとかできそうですよね。

/* ソースコードを行番号なしにする */
.is-code-row-number-enable pre.nocode::before {
	content: "";
}
.is-code-row-number-enable pre.nocode {
	padding: 1em;
}

コード番号表示サンプル

同じソースコードの表示の違いを並べてみました。

/* ソースコードを行番号なしにする */
.is-code-row-number-enable pre.nocode::before {
	content: "";
}
.is-code-row-number-enable pre.nocode {
	padding: 1em;
}

/* ソースコードを行番号なしにする */
.is-code-row-number-enable pre.nocode::before {
	content: "";
}
.is-code-row-number-enable pre.nocode {
	padding: 1em;
}

/* ソースコードを行番号なしにする */
.is-code-row-number-enable pre.nocode::before {
	content: "";
}
.is-code-row-number-enable pre.nocode {
	padding: 1em;
}

ここまで混在させることはないかもしれませんが何かの参考になればと思います。