Cocoonでソースコードを表示してみる

Cocoon

こんにちは、るん(@run)です。

WordPressの無料テーマCocoonには、デフォルト機能としてソースコードをハイライトする機能があらかじめ搭載されています。
ソースコードをハイライト表示する方法は以下のページで紹介されています。

ソースコードをハイライト表示させる方法
テーマ内でソースコードをハイライト表示し、見やすくする方法の紹介です。highlight.jsプラグインのみを利用したシンプルなものを実装しています。

私はときどきソースコードを記事内で取り扱うことがあるので、この機能は便利だなぁと感じました。
しかし、どうやってソースコードを載せたら、この機能を使えるのか、はじめ分からなかったので、今回は、ソースコードを記事に載せるやり方をまとめていきます。

スポンサーリンク

「整形済み」ブロック追加

まずは、ソースコードを掲載したい場所に「整形済み」ブロックを追加します。
整形済みブロックは、「フォーマット」の中にあります。

「整形済み」ブロック内にソースコード追加

追加した整形済みブロックに、ソースコードを記述します。
そうすると、こんな感じで表示されます。

<p>Hello world</p>

まとめ

簡単にソースコードを表示することができました!

るん
るん

ソースコードが表示できると、それだけでカッコよくみえる気がする(笑)

とっても便利な機能ですが、やり方を知らないと機能が使えなくてもったいないですからねぇ。
私もこれでまた一歩、レベルアップできた気がします。
まだまだたくさん学ぶべきことはたくさんありますが、この調子でどんどんレベルアップしていこうと思います!

るん
るん

それでは、またお会いしましょう♪

コメント

タイトルとURLをコピーしました