記事中にソースコードを載せたい！
HTML/CSSについて調べているとたまに見かけるソースコードですが、
ただ記事中にソースコードを書いただけではこのような仕様にはなりませんでした…
ということで方法を調べてみました！
※ソースコードのイメージ
.article img:hover {
opacity: 0.6;
transition: all 0.8s ease;
}Cocoonの設定
①cocoon設定の[コード]を開き、「ソースコードをハイライト表示」にチェック
ちなみに、その下の「行番号表示」にチェックを入れると、上記の画像のようにソースコードの左端に番号がつきます。
②「ハイライトスタイル」でスタイルを選ぶ。
私は「monokai」というスタイルを使っています。
記事中に載せる方法
①「＋」マーク（ブロックの追加）を押して「コード」を選ぶ。
②「言語選択」から、入力したい言語を選択する。
まとめ
今回はWordPressの無料テーマ「Cocoon」で記事中にHTML/CSSのソースコードを載せる方法を調べて実践してみました！
以前から他の方のブログをみて、どうやって載せているんだろう…と気になっていたのですが、設定や掲載方法は思っていたより簡単でわかりやすかったです！
この表示方法にするだけで、ひとめでソースコードを載せているのが分かりますし、目立つのでいいですね。
今後ぜひ活用していきたいと思います〜！
コメント