HTMLでプログラムソースを表示させるのって、けっこうたいへんだんですね～。。。
そのまま表示させようとしたら長くなるし、
短くしようといろんなタグで囲んだらたっぷり改行コードついたりして。。。
【WordPress】綺麗にソースコードを表示する SyntaxHighlighter Evolvedの使い方 | WordPress College
↑調べてみたら、やはりふつうではダメそうです
プラグインを入れれば行けそうです
Syntax Highlighter
エディタのようにWebサイト上に綺麗にソースコードを表示する方法
だそうです
WordPressのプラグインがあるそうなので、
それをサイトにインストールしていこうとおもいます
SyntaxHighlighter Evolvedのインストール
公式サイトですね↑
手順
ダッシュボードからプラグインより新規追加をクリックする
プラグイン追加の画面で「SyntaxHighlighter Evolved」をさがします
↑赤枠部に「SyntaxHighlighter Evolved」を入れてください
SyntaxHighlighter Evolvedが出てきたら、
今すぐインストールをクリックしてインストールします
↓のように有効化が表示されたらそれをクリックする
これでOK
設定も変更できますが、とくに変える必要もないいかと
使い方
ビジュアルエディタ上で
［css］~［/css］で囲むと
コードが無加工で表示できます