今日は、デフォルトのCocoonの設定を少し変えて、ソースコードの表示を少し見やすい設定に変更してみたいと思います。
という方におススメです。また、読み手のユーザーにも優しいのではないのでしょうか。
ちなみ、このような表示になります。オプションで行番号の表示もできます。
これがハイライト表示前になります。
それでは、実際に設定をおこないたいと思います。
目次
Cocoon設定画面
まず、WordPress 管理画面にある「Cocoon 設定」を選択します。
コード タブを開く
次に、色々あるタブの中から「コード」タブを選択します。
ソースコードの設定をする
この中に、「ハイライト表示」という項目があるので以下にチェックをいれます。
以上で「変更をまとめて保存」を選択してください。
また、使用する対応言語を増やしたい場合は、ライブラリの「全て」を選択します。
以上で作業は完了ですが、行番号表示について変更する場合は続けて以下を参考にしてください。
ソースコードの最大表示行数を変更
行番号表示について、Cocoonのデフォルト最大行数は99行までしか対応していません。
これを変更して、99行以上のソースコードの行番号を表示できるようにしたいと思います。
テーマファイルエディターを開く
まず、テーマファイルエディターを開きます。
次に、今回の記述先になる「functions.php」を開きます。
右側にある「テーマのための関数」というタイトルを選択します。
テーマを編集する
では、実際に編集するのですが以下のコードを追加します。
//行番号の最大表示数を変更する
add_filter('max_code_row_count', function ($value){
return 300; //最大表示行数を入力
});ここの３行目の内容にある”return”の値で最大表示行数が設定できます。
なので、上記では「300」に設定していますが、それ以上にしたい場合はここを変更すれば対応できます。
ソースコードを確認してみる
では最後に、ソースコードの行数が99行以上表示された確認します。
行番号の表示数が99行以上表示されたことが確認できました。
作業は以上になります。
補足
デフォルトのコードブロック以外に、シンタックスハイライト表示ができるプラグインがあります。
こちらの特徴は、このようになっている。
などが用意されています。細かな設定はWordPress 管理画面の設定にある「[HCB]設定」からおこなうことができます。
このプラグインは、導入して専用のコードブロックを使えばすぐ使えるので試してみてください。
まとめ
いかがだったでしょうか。今回は、ソースコード表示について紹介しました。
Cocoonの設定を少し変更するだけ簡単できる作業です。また、行番号の表示数が変更の場合は、コードを記載することで対応可能です。
そして、可読性を向上につながると思われるのでぜひやってみてください。
コメント