こんにちは、まちゃりさです。
記事の中にソースコードを記載したいな・・
黒い背景で表示されるソースコードを見るけど、同じようにできるかな？
今回は、ブログ記事の中でたまに見かけるソースコード（以下イメージ）
このような黒い背景にソースコードが書かれているもの。
私は、過去にどう表示すればいいの？と悩みましたので、今回ご紹介することにします。
「ブログにソースコードを載せたい」という方は、本記事をぜひ参考にしてください。
※本記事は、WordPressテーマの「Cocoon」を使用している方向けです。
それでは、どうぞ！
ソースコードの表示設定
ソースコードの表示は、Cocoon設定で簡単にできちゃいます。
ワードプレス管理画面→[Cocoon設定]→[コード]と進みます。
ハイライト表示の「ソースコードをハイライト表示」にチェックを入れます。
「行番号表示」にチェックを入れると、ソースコードの左側に番号を表示することができます。
コードのボリューム感がわかるので、私は表示させています。
お好みで設定しましょう。
続いて、「ハイライトスタイル」で好きなスタイルを選びます。
最後に、[変更をまとめて保存]をクリックして完了です。
ちなみに私は、「Atom One Light」というのを使用しています。（2021年4月現在）
ブログ記事でHTML/CSSのソースコードを載せる方法
それでは、実際に記事内にソースコードを挿入していきます。
「＋」マーク（ブロックの追加）を押して「コード」を選択します。
右側の「ブロック」タブにある「言語選択」から、入力した言語を選択します。
右側に「ブロック」タブが表示されていないときは・・
ブロックを選択した状態で（１）、歯車のマークをクリックする（２）と、表示されます。
おまけ：コピーボタン機能
最近発見したことです。
使用するスキンによっては、ソースコードをコピーできるボタンが表示されます。
私はCocoonのスキン「シルク」を使用していますが、「コード」ブロックをクリックすると、右上にボタンが表示されます。
ここから、読者にコードをコピーしてもらうことができます。
長いコードをコピーするには大変かなと思っていまして、便利で気に入っている機能です。
どのスキンに機能がついてるかまでは、まだ把握できていませんが、スキンを選ぶときの1つの目安に使われてもいいかもしれません。
まとめ：CocoonでブログにHTML/CSSのソースコードを載せる！
それでは、最後にまとめます。
HTML/CSSのソースコードをブログに記載したい場合、Cocoonの設定から[コード]を設定します。
すると、黒い背景にソースコードが書かれている表示（「シンタックスハイライト」）を再現できるようになります。
とても、簡単ですね。
ブログ記事でソースコードを書きたいと思ったときは、ぜひ参考にしてください。
それでは、今回はこの辺で。
最後までお読みいただき、ありがとうございました！
おわり。
コメント