まずはじめに、CSSやHTMLなどのコードは、ブログ記事のなかで普通の文字列のように記述すると、改行などで形が崩れたり、プログラムとして動作したりしてしまいます。
つまり、ブログ上では基本的にコードを文字列としてそのまま表示させることはできません。
たとえば、エディター画面ではショートコードは即座にコードとして認識され、web上でもプログラムとして動作してしまいます。
コードとして認識されて…>>
>>…「today_date(今日の日付)」として動作
また、CSSは改行などの表示状態が崩れますし…、HTMLは段落内にコピペしようとするだけで弾かれてしまったりもします。
ではここからは、『ソースコードをweb上でそのまま表示させる方法』です。
コードをweb上でそのまま表示させる方法
左パネルの「ブロック」タブから、「コード」を選択します。
コードを入力するブロックが追加されるので、枠内にコードを入力(またはコピペ)します。
コードが崩れることなくそのまま表示されます。(下画像はCSSの例。)
※web上での表示状態も同じです。
コードブロックの見た目を変更する方法
ハイライト表示
代表的な方法は「ハイライト表示」です。
まず、コードブロックを選択した状態で、右パネル「ブロック」タブの「言語」から、適切なプログラム言語を選択しておきます。(下画像はCSSの例。)
次に、「Cocoon設定」の「コード」で、「ソースコードをハイライト表示」を適用させます。
もとの編集画面にもどってプレビューを確認すると、背景と特定の文字の色が変わって表示されているのが分かります。
「行番号表示」を適用させれば、左側に番号を表示させることができます。
(先ほどと同じ「Cocoon設定」>>「コード」の画面から。)
「ハイライトスタイル」にハイライトの種類がたくさんあるので、テーマブロックの外観をまったく違うデザインに変更することも可能です。
ブロック内で簡単カスタマイズ
編集画面の右パネルの「ブロック」で、テキストと背景を好きな色に変更することもできます。
ただし、文字が見えづらくならないよう、テキストと背景に使う色の組み合わせには注意!
以上、『ソースコードをweb上でそのまま表示させる方法』でした。
使用しているWordPressテーマは『Cocoon』です。