こんにちは、さこっしーです。
WordPressのテーマであるCocoonは非常に使いやすいです。
コードを表示するのに便利なシンタックスカラーリング(シンタックスハイライト)機能があって、記事を見やすくしてくれます。
今回は、Cocoonにおけるソースコードのハイライト表示方法についてご紹介します。
ハイライトの表示の設定方法
![](https://sakossy.com/wp-content/uploads/2021/05/desktop-source-code-and-wallpaper-by-computer-language-with-coding-and-programming.png)
ハイライト表示にチェックを入れる
WordPressの管理画面左メニューから「Cocoon設定」→「Cocoon設定」をクリックします。
![](https://sakossy.com/wp-content/uploads/2021/05/b4edce88927955324e9d2905f60fdb29.png)
「Cocoon設定」の中の「コード」をクリックして「ソースコードをハイライト表示」にチェックを入れます。
![](https://sakossy.com/wp-content/uploads/2021/05/74c72c9c0c30f491be939f269326de8c.png)
あとは「変更をまとめて保存」をクリックして、完了です。
![](https://sakossy.com/wp-content/uploads/2021/05/fc6f6cd074409f53535710f0a0ff2519.png)
ハイライトカラーは下記のサイトから確認できます。
ブログ記事欄への挿入方法
「+マーク」をクリックして「コード」を選択します。
![](https://sakossy.com/wp-content/uploads/2021/05/317c0028c3a5778f451de78787724a18.png)
「コード」を入力する画面が表示されます。
![](https://sakossy.com/wp-content/uploads/2021/05/abfe3be0a17f2a9073876380a95b03d0.png)
「コード」を入力するか、コピペしましょう。
![](https://sakossy.com/wp-content/uploads/2021/05/adf8a61f71ad2e693c873ec3e2e4caa9.png)
コードを入力したら、右側にある「ブロック」タブを選択します。
「言語選択」の欄からソースコードの言語を選択しましょう。
![](https://sakossy.com/wp-content/uploads/2021/05/b73809c9f256553666e4b3ad4c5d8bd6.png)
![](https://sakossy.com/wp-content/uploads/2021/05/3365c0992dbe11baeb3dc70273c01bc0.png)
言語を選択したら、プレビューで確認してみましょう。
![](https://sakossy.com/wp-content/uploads/2021/05/d3b3f37e6fb963585fa4cf193205ea25.png)
下記のように、表示されていれば完成です。
![](https://sakossy.com/wp-content/uploads/2021/05/e268f1885347ac321b24de0bfdaa70b3.png)
まとめ
今回は、Cocoonでソースコードをハイライト表示させる方法についてをご紹介しました。
設定と、やり方がわかれば、とても簡単です。
やってみると、めちゃくちゃ簡単でしたが、やっぱり自分でやってみないと簡単かどうかもわかんないですね。
今回は、以上となります。
最後まで読んでいただき、ありがとうございました。
コメント