こんにちは、まちゃりさです。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2020/03/nayamu_woman.jpg?resize=150%2C150&ssl=1)
記事の中にソースコードを記載したいな・・
黒い背景で表示されるソースコードを見るけど、同じようにできるかな?
今回は、ブログ記事の中でたまに見かけるソースコード(以下イメージ)
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/0.サンプル.png?resize=817%2C251&ssl=1)
このような黒い背景にソースコードが書かれているもの。
私は、過去にどう表示すればいいの?と悩みましたので、今回ご紹介することにします。
「ブログにソースコードを載せたい」という方は、本記事をぜひ参考にしてください。
※本記事は、WordPressテーマの「Cocoon」を使用している方向けです。
それでは、どうぞ!
ソースコードの表示設定
ソースコードの表示は、Cocoon設定で簡単にできちゃいます。
ワードプレス管理画面→[Cocoon設定]→[コード]と進みます。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/1-1_Cocoon設定.png?resize=1024%2C539&ssl=1)
ハイライト表示の「ソースコードをハイライト表示」にチェックを入れます。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/1-2ソースコードのハイライト表示を有効.png?resize=1024%2C542&ssl=1)
続いて、「ハイライトスタイル」で好きなスタイルを選びます。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/1-3.ハイライトスタイル.png?resize=1024%2C552&ssl=1)
最後に、[変更をまとめて保存]をクリックして完了です。
ちなみに私は、「Atom One Light」というのを使用しています。(2021年4月現在)
ブログ記事でHTML/CSSのソースコードを載せる方法
それでは、実際に記事内にソースコードを挿入していきます。
「+」マーク(ブロックの追加)を押して「コード」を選択します。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/2-1コードの追加.png?resize=925%2C326&ssl=1)
右側の「ブロック」タブにある「言語選択」から、入力した言語を選択します。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/2-2言語選択.png?resize=932%2C722&ssl=1)
おまけ:コピーボタン機能
最近発見したことです。
使用するスキンによっては、ソースコードをコピーできるボタンが表示されます。
私はCocoonのスキン「シルク」を使用していますが、「コード」ブロックをクリックすると、右上にボタンが表示されます。
![](https://i0.wp.com/macharisa.com/wp-content/uploads/2021/04/3.コピー.png?resize=817%2C251&ssl=1)
ここから、読者にコードをコピーしてもらうことができます。
長いコードをコピーするには大変かなと思っていまして、便利で気に入っている機能です。
どのスキンに機能がついてるかまでは、まだ把握できていませんが、スキンを選ぶときの1つの目安に使われてもいいかもしれません。
まとめ:CocoonでブログにHTML/CSSのソースコードを載せる!
それでは、最後にまとめます。
HTML/CSSのソースコードをブログに記載したい場合、Cocoonの設定から[コード]を設定します。
すると、黒い背景にソースコードが書かれている表示(「シンタックスハイライト」)を再現できるようになります。
とても、簡単ですね。
ブログ記事でソースコードを書きたいと思ったときは、ぜひ参考にしてください。
それでは、今回はこの辺で。
最後までお読みいただき、ありがとうございました!
おわり。
コメント