ワードプレスのブロックエディタ（グーテンベルク）にソースコードを貼り付けたい！エスケープ処理をちゃんとして！というのも制作ブログをされている方ならよくやる作業だし気になりますよね。

毎回HTMLエスケープツールをブラウザで立ち上げて、ソースコードを張り付けて、エスケープを実行して、そして貼り付けて…、ぶっちゃけけっこう面倒。

ということでここではワードプレスのブロックエディタにエスケープ処理しながらソースコードを張り付ける方法を。

 

ブロックエディタにはコード用ブロックがある

なんか方法を紹介！みたいにカッコよく書いちゃったんですが、実はブロックエディタには「コード」ブロックちゅうのがもう標準で用意されてるんですよね。

んでこれを使うと、

 

<!-- wp:code -->
<pre class="wp-block-code"><code>ソースコードずらずら</code></pre>
<!-- /wp:code -->

という風にただ貼り付けたいソースコードを「コードブロック」にペーストするだけで、ちゃーんとpreとcodeで囲ってくれながら、そしてエスケープ処理もしてくれながらソースコードを張り付けられちゃいます。

なんだこれ、めちゃくちゃ便利です。

 

クラシックエディタは？

ブロックエディタ（グーテンベルク）なら何も考えずにソースコードを張り付けるだけでエスケープもpreもcodeもぜんぶまるっとOKだったんですが、んじゃワードプレスのクラシックエディタはどうなの？と。

クラシックエディタでも「コード」ボタンを追加することはできるんです（プラグイン：「Advanced Editor Tools」）が、それで入れられるのはcodeタグだけ。

preがついてくれないので改行とかが反映されないんですよね。ちょっとかゆいところに手が届いてない感があるクラシックエディタ。

ちなみにビジュアルモードだったら、ソースコードを張り付けるだけでエスケープ処理はばっちりやってくれます。これはクラシックエディタでもブロックエディタでも同じ。けっこうお利口です。

（※クラシックエディタのテキストモードだとエスケープしてくれません）

 

ということでpreがつかないのがクラシックエディタ唯一の難点。

これを解決するには「AddQuickTag」というプラグインを使う感じ。たぶんほとんどの人が使ってると思います。

 

まとめ

ワードプレスのブロックエディタ（グーテンベルク）でソースコードをイイ感じに張り付ける方法を紹介しました。

…というよりブロックエディタは標準でコードブロックがあってそこにペーストするだけでエスケープ処理からpre、code囲いとぜんぶバシッとやってくれちゃう。

さあ、クラシックエディタからブロックエディタに乗り換えるときがきましたね！

参考：【ワードプレス】ブロックエディタにデフォルトで入らないスタイル一覧