【2026年10月20日時点の情報です】
このブログでは、記事のコードに色を付けて見せるために、WordPressのプラグイン「Code Block Pro」を使っています。
2026年10月11日、HTMLの「エスケープ」を説明する記事を書き直していたとき、エスケープしたあとの文字を見せたいコードが、表示では元の記号に戻ってしまいました。この記事では、そのときに起きたことと、直し方をまとめます。
場面1：エスケープしたあとの文字を見せたかった
書き直していたのは、Laravelの「Blade」という仕組みで、画面に値を出すときのエスケープを説明する記事です。
エスケープは、HTMLで特別な意味を持つ記号を、ただの文字として表示される書き方に置き換えることです。例えば、< は <、> は >、' は ' に置き換わります。こうしておくと、入力に <script> のようなタグが入っていても、ブラウザーはそれをタグとして動かさず、文字として表示します。
記事では、「エスケープすると、こう置き換わる」という結果を、次の1行で見せたいと考えていました。
<div><script>alert('危険な処理');</script></div>場面2：Code Block Proでは、元の記号に戻って表示された
この1行を Code Block Pro のブロックに入れると、表示は次のようになりました。
<div><script>alert('危険な処理');</script></div>< や ' が、元の < や ' に戻っています。これでは、「エスケープすると置き換わる」という説明になりません。
気づきにくかったのは、編集画面の中での見え方です。
| No. | 見ている状態 | 見え方 |
|---|---|---|
| 1 | Code Block Pro の枠で、文字を選んで編集しているとき | <script> と、入れたとおりに入っている |
| 2 | 色が付いた表示になったとき | <script> に戻っている |
入れた文字は正しいのに、色を付けて表示するときに、< のような書き方が記号として読まれてしまうようでした。
場面3：その1行だけ、標準の「コード」ブロックにした
この1行だけ、Code Block Pro ではなく、WordPressに最初から入っている「コード」ブロックにしました。
- Code Block Pro のブロックを削除する
- 「＋」から、標準の「コード」ブロックを追加する
- 場面1の1行を貼る
標準の「コード」ブロックは、貼った < を、そのまま文字として表示します。色は付きませんが、1行だけなので読みにくくはなりません。直したあとは、編集画面ではなく、プレビューで < のまま表示されているかを確かめると確実です。
同じ記事の中の、ほかのコード（Bladeのコードなど）は、Code Block Pro のままにしています。困るのは、< や ' のような、エスケープしたあとの文字をそのまま見せたいコードだけです。
場面4：エスケープした文字を書かずに済むなら、言い方を変える
コードの中のコメントなどで、エスケープしたあとの文字にふれるだけなら、その文字を書かない言い方に変える方法もあります。例えば、「’ が HTML 用の記号に置き換わったまま入る」のように、言葉で説明します。これなら、Code Block Pro のままで済みます。
| No. | 見せたいもの | 書き方 |
|---|---|---|
| 1 | エスケープしたあとの文字そのもの | 標準の「コード」ブロックに入れる |
| 2 | エスケープしたことを説明するだけ | 文字を書かずに、言葉で説明する（Code Block Pro のまま） |
| 3 | ふつうのコード | Code Block Pro のまま |
まとめ
Code Block Pro は、色を付けて表示するときに、< のようなエスケープしたあとの文字を、元の記号に戻して表示していました。編集中の枠では正しく入っているので、プレビューで見るまで気づきにくい崩れです。
エスケープしたあとの文字を見せたいコードだけは、標準の「コード」ブロックに入れる。そして、プレビューで確かめる。これで、説明したいとおりの文字を見せられます。
WordPressが自動で文字を変えて困ったことは、コマンドのオプションのハイフン2つが、ダッシュ1つに変わっていた記事と、例のURLが勝手にブログカードになった記事にもまとめています。WordPressのプラグインのほかの記事は、Plug-inのカテゴリーにあります。
コメント