【ブロックエディター】ソースコードをそのまま表示させる方法(Cocoon)

WordPress
スポンサーリンク

当ブログは収益を目的としたアフィリエイト広告およびアドセンス広告を使用しており、記事内にそれらの広告が含まれる場合があります。

まずはじめに、CSSやHTMLなどのコードは、ブログ記事のなかで普通の文字列のように記述すると、改行などで形が崩れたり、プログラムとして動作したりしてしまいます。

つまり、ブログ上では基本的にコードを文字列としてそのまま表示させることはできません

たとえば、エディター画面ではショートコードは即座にコードとして認識され、web上でもプログラムとして動作してしまいます。

コードとして認識されて…>>

>>…「today_date(今日の日付)」として動作

また、CSSは改行などの表示状態が崩れますし…、HTMLは段落内にコピペしようとするだけで弾かれてしまったりもします。

ではここからは、『ソースコードをweb上でそのまま表示させる方法』です。

使用しているWordPressテーマは『Cocoon』です。

スポンサーリンク

コードをweb上でそのまま表示させる方法

左パネルの「ブロック」タブから、「コード」を選択します。

コードを入力するブロックが追加されるので、枠内にコードを入力(またはコピペ)します。

コードが崩れることなくそのまま表示されます。(下画像はCSSの例。)

web上での表示状態も同じです。

スポンサーリンク

コードブロックの見た目を変更する方法

ハイライト表示

代表的な方法は「ハイライト表示」です。

ハイライト表示とは?

背景色を反転表示にしたり 特定の文字列の色を変えたりして、コードを目立たせるようにする表示方法のこと。

まず、コードブロックを選択した状態で、右パネル「ブロック」タブの「言語」から、適切なプログラム言語を選択しておきます。(下画像はCSSの例。)

「言語選択」は、このあとハイライト表示にしたときの文字の色分けに関係します。

次に、「Cocoon設定」の「コード」で、「ソースコードをハイライト表示」を適用させます。

もとの編集画面にもどってプレビューを確認すると、背景と特定の文字の色が変わって表示されているのが分かります。

「行番号表示」を適用させれば、左側に番号を表示させることができます。
(先ほどと同じ「Cocoon設定」>>「コード」の画面から。)

「ハイライトスタイル」にハイライトの種類がたくさんあるので、テーマブロックの外観をまったく違うデザインに変更することも可能です。

ブロック内で簡単カスタマイズ

編集画面の右パネルの「ブロック」で、テキストと背景を好きな色に変更することもできます。

ただし、文字が見えづらくならないよう、テキストと背景に使う色の組み合わせには注意!

以上、『ソースコードをweb上でそのまま表示させる方法』でした。

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