スポンサーリンク

[Cocoon] 同ページでソースコードのハイライト表示の行番号を付け外しする方法

ブログ環境
スポンサーリンク

どうも、よっさんです( ̄▽ ̄)

以前書いた記事で、同ページ内でソースコードのハイライト表示の行番号を付け外ししたいということがありました。
(使用テーマはCocoonです)

ブログのスピードアップ!ほぼ無劣化で投稿画像の圧縮を行うおすすめ方法
WordPress含む全ブログが対象です。ブログの読み込み速度を上げたい、Google検索順位を上げたい、画像サイズ変更を楽したい、サーバー容量を削減したい人におすすめの記事です。

Macのターミナルのコマンドをハイライト表示したい時は行番号なし、シェルスクリプトは行番号ありにするという感じです。

結論から言うと、デフォルトで行番号を付けておき、行番号を外したい時はクラスを付けるという対応を行います。

スポンサーリンク

行番号ありの設定

まず、デフォルトのハイライト表示を行番号ありに設定していきます。

[Cocoon設定 – コード] からソースコードをハイライト表示行番号表示の2つにチェックを入れます。

ハイライト表示設定

行番号なしの設定

行番号なしのCSSを登録します。

[外観 – テーマエディタ – スタイルシート(style.css)] に、下記CSSをコピーして貼り付けて、ファイルを更新します。

/* 行番号なし */
.is-code-row-number-enable pre.nocode::before {
	content: ""; /* 行番号を消す */
}
.is-code-row-number-enable pre.nocode {
	padding: .5em; /* 余白設定 */
}

行番号なしのクラスを登録

スタイルシート(style.css)を変更したくない場合は、投稿ページのカスタムCSSに、上記CSSをコピーして貼り付けます。

行番号なしのクラスを登録(簡易)

よっさん
よっさん
Gutenberg(グーテンベルク)じゃないことがバレバレ(´Д`;)

使い方

行番号ありのソースコードのハイライト表示をしたい場合は、
本文中に<pre>〜</pre>のようにソースコードをpreタグで囲みます

// 行番号あり
$(function() {
	$("a").each(function() {
		console.log($(this).attr("href"));
	});
});

行番号なしのソースコードのハイライト表示をしたい場合は、
本文中に<pre class="nocode">〜</pre>のようにソースコードをnocodeクラスのpreタグで囲みます

// 行番号なし
$(function() {
	$("a").each(function() {
		console.log($(this).attr("href"));
	});
});

まとめ

行番号ありのソースコードのハイライト表示はpreタグで囲み、行番号なしはnocodeクラス付きのpreタグで囲みます

みなさん、行番号の付け外しはできましたでしょうか?(^^)

Gutenberg(グーテンベルク)のブロック管理の場合でも、自動でwp-block-codeクラスが追加されるだけで、上記のCSSを登録することで、問題なく行番号あり、なしの表示ができるかと思います!

あまりこのような需要があるかは分かりませんが、よっさんはソースコードのハイライト表示を使った初めての投稿で需要があったので、思い切って記事にしてみました!

以上、Cocoonテーマで同ページにあるソースコードのハイライト表示の行番号を付け外しする方法でした(^o^)/

ブログ書いてる人
よっさん

ロングライドが好物でブルベに興味津々です。
2020年10月にブログ開設、自転車・ダイエット・IT技術などについて掲載しています。

よっさんをフォローする
ブログ環境
スポンサーリンク
\よければシェアお願いします!/
スポンサーリンク
自転車健康生活

コメント