ページ内でソースコードの行番号が付いたものと付いていないものを混在させたい

記事の中でソースコードを掲載することが度々あるのですが、Cocoonの設定でコースコードの番号を表示するにしてあるためにすべてのソースコードに1番から順番に番号が振られてしまいます。
見やすくてとっても便利なのですが、番号を表示したくない場合もあったるするので何とかならないかと思い調べてみました。

“自転車健康生活よっさん“のサイトで紹介されていたので早速活用させていただくことにいたしました。

CSSにCodeを追加するだけ

子テーマの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;
}

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