こんにちは、るん（@run）です。
WordPressの無料テーマCocoonには、デフォルト機能としてソースコードをハイライトする機能があらかじめ搭載されています。
ソースコードをハイライト表示する方法は以下のページで紹介されています。
ソースコードをハイライト表示させる方法
テーマ内でソースコードをハイライト表示し、見やすくする方法の紹介です。highlight.jsプラグインのみを利用したシンプルなものを実装しています。
wp-cocoon.com
私はときどきソースコードを記事内で取り扱うことがあるので、この機能は便利だなぁと感じました。
しかし、どうやってソースコードを載せたら、この機能を使えるのか、はじめ分からなかったので、今回は、ソースコードを記事に載せるやり方をまとめていきます。
「整形済み」ブロック追加
まずは、ソースコードを掲載したい場所に「整形済み」ブロックを追加します。
整形済みブロックは、「フォーマット」の中にあります。
「整形済み」ブロック内にソースコード追加
追加した整形済みブロックに、ソースコードを記述します。
そうすると、こんな感じで表示されます。
<p>Hello world</p>
まとめ
簡単にソースコードを表示することができました！
るん
ソースコードが表示できると、それだけでカッコよくみえる気がする(笑)
とっても便利な機能ですが、やり方を知らないと機能が使えなくてもったいないですからねぇ。
私もこれでまた一歩、レベルアップできた気がします。
まだまだたくさん学ぶべきことはたくさんありますが、この調子でどんどんレベルアップしていこうと思います！
るん
それでは、またお会いしましょう♪
コメント