【一番簡単】Cocoonで投稿記事にソースコードを入れる方法

Cocoonにソースコードを入れるその他
スポンサーリンク

Cocoonで投稿記事にソースコードを入れる方法をご存知ですか?

どうも、ちゃんカマです。

このchan-kamaブログでも使用している、無料のWordPressテーマ「Cocoon」
このCocoonの投稿記事に、プログラミングのソースコードを入れる方法をご存知ですか?
自分はこのブログに備忘録も兼ねて、よくプログラミング学習のことを記事に書いています。その時にソースコードを記事に挿入する必要があるんですね。
今回お伝えする方法を知るまでは、ソースコードをスクリーンショットで撮って、画像として貼り付けていました。
しかし、その方法だと手間もかかるし、ブログを閲覧している方もソースコードをコピペ出来なし、あまり良い方法とは言えないですね。

そこで、今回はCocoonでプラグイン無し、<pre>タグの挿入も必要無しの、一番簡単な投稿記事にソースコードを入れる方法をお伝えします。

ブロックエディターの「コード」を使用する

結論、ブロックエディターの「コード」を使用する方法が一番簡単です。

まず、ブロックの追加 → フォーマット → コード をクリック。

ブロックエディターのコード
ブロックエディターのコード

すると、下の画像のような画面が開くので、「コードを入力...」の欄にコピーしたソースコードをそのまま貼り付ければOKです。

ブロックエディターのコードを開いた画面
ブロックエディターのコードを開いた画面

このような感じに。

ソースコードを貼り付けた画像
ソースコードを貼り付けた画像

貼り付けたソースコードによってはインデントが崩れている場合があるので、そこは適宜修正してください。

プレビュー画面で見てみましょう。

ソースコードが表示されている
ソースコードが表示されている

きちんと表示されていますね。もちろん、コピペも出来ますよ。

ちなみに、Cocoon設定 → コード の設定でコードの表示方法は変更することが出来ます。

Cocoon設定のコードの設定
Cocoon設定のコードの設定

<pre>タグは必要無い?

ネットの検索記事では<pre>タグを挿入する方法が示されていますが、別に挿入しなくても問題無く表示されています。なので、必要無いのかなと。

プラグインを使用する方法

投稿記事内にソースコードを表示するプラグインでは、「Crayon Syntax Highlighter」が有名なようです。しかし、このプラグインはしばらく更新をされていないようなので、あまりお勧めは出来ないかなと思います。

Crayon Syntax Highlighterの具体的な使用方法はネットでたくさん検索出来るので、ここでは割愛させていただきます。

Crayon Syntax Highlighter
Crayon Syntax Highlighter

まとめ

Cocoonの投稿記事に、プログラミングのソースコードを入れる一番簡単な方法は、ブロックエディターのコードを使用すれば良いということが分かりました。
他にも方法があるのかもしれませんが、自分にとってはこの方法が一番簡単で、十分に見やすく表示してくれるかなと思います。

この方法を使って、今後もプログラミング学習の内容に関する記事を書いていきたいと思います。今回の記事が皆さんの参考になれば幸いです。

以上、ちゃんカマでした。

コメント

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