【Cocoon】ソースコード(整形済みテキスト)のおすすめスタイル

ソースコードが見にくい…

こんな悩みを持っている方向け。本記事ではソースコード（整形済みテキスト）のおすすめスタイルを以下の2つの観点から選んでみました。

それでは早速紹介していきたいと思います〜。

Cocoonでソースコードをハイライト表示する方法

コードをハイライト表示する方法も念のため紹介しておきますね！めっちゃ簡単です笑

WordPressのエディタで「段落」と書いてある場所をクリックして「整形済みテキスト」を選択するだけです！

実際にはこんな感じで表示されます。コードは見やすいように色も自動でつけてくれますよ！普通の文章も囲うことができます。

Cocoonでソースコード(整形済みテキスト)のスタイルを変更する方法

ソースコードをハイライト表示にする方法がわかったところで、スタイルを変更していきたいと思います。

まず「Cocoon設定 > コード」を開きます。

一応、設定項目を全て確認しておきましょう！

ここのハイライトスタイルという所を変更することでスタイルを変えることができます！

ソースコード(整形済みテキスト)おすすめのスタイル

では早速おすすめのスタイルを紹介していきますね。

スタイルは全部で９０個ほどあります。その中でも私のおすすめは・・・

です。このスタイルはカラフルでデザインがいい点、コードがみやすい点、普通の文章も見やすい点の３つのポイントが全て揃っているスタイルです！

Cocoon設定から、ハイライトスタイルをAtom One Lightにすることで変更できますが、他のスタイルもあるので少し紹介していきたいと思います。といっても、スタイルを見ることが出来る便利なサイトがあるのでそちらをご覧ください↓

We're not a CDN - highlight.js

highlightjs.org

スタイルを選ぶときの注意点をいくつか紹介しますね。こちら↓

バック色が白いか

スタイルの半分ほどがバックの色が黒いです。黒いとかっこいいのですが、なかなか見にくかったりします。

あまりおすすめしません。

カラフルで見やすいか

コードはある程度カラフルな方が見やすいですね。この辺は好みがありますが、黒が多いよりカラフルな方がいいかなという印象です。

まとめ

以上、ソースコード(整形済みテキスト)のおすすめスタイルでした！

私のおすすめスタイルはAtom One Lightです。ぜひ皆さんも使ってみてくださいね！

それでは、ブログがんばっていきましょう〜。