[WordPress]プラグインなしで既存のcodeタグを使ってコードを埋め込む(表示する)方法

こんにちは、ハラダ(@nobuhiro_harada)です

WordPress のエディタにコードを埋め込むためのプラグインや方法はいくつかあるようなのですが、、、

Crayon Syntax Highlighterの使い方ーWordPressプラグイン【初心者向け】
【プラグイン不要】WordPressブログにソースコードを貼り付ける方法!

ちょっと使いたいだけだったので、WordPress のテキストモードに元々ある code タグを使いました

手順

default-code-tag1

こう書いて、

<p>てすとてすと</p>

と、表示させたかったのですが、そのままだと code タグの中の p タグに使われている < と > を html のタグと判定して、文字列で表示してくれません

default-code-tag2

半角の不等号 「 < 」や「 > 」 を文字列として表示させるには、「文字実態参照」で記入すれば、表記されます

参考:HTML文字参照・実体参照一覧

default-code-tag7

default-code-tag8

「 < 」 が 「 &lt; 」
「 > 」 が 「 &gt; 」

ですね。

ちなみに code タグで挟まなくても、表記できます

default-code-tag5

default-code-tag6

複数行の場合 WordPress 4.9.1 で、テーマ Twenty-Sixteen 試したら、code タグにスタイルがあてがわれてるのでこのように表示されます

default-code-tag3

default-code-tag4

ひとこと

元々 code タグって、あるんやったら、サクッと使えてほしかった。。

それでは、また

スポンサーリンク
レクタングル大
レクタングル大
スポンサーリンク
レクタングル大