WordPressの新エディタでPrism.jsを使う方法

こんにちは、シロウです。

今回の記事ではタイトル通り、シンタックスハイライトを簡単に導入できるPrism.jsをWordpressの新エディタ「Gutenberg」で使う方法をご紹介します。

ちなみに僕は元々旧エディタを使っていたのですが、只今自作テーマを作成していて、旧エディタだとWordpressの自動整形とかが原因で上手くPrism.jsを使えませんでした。

そこで新エディタ（Gutenberg）をこれからは使っていこうと思ったのがGutenbergを使うことになったきっかけです。（あとプラグイン「Classic Editor」を使う必要がなくなって読み込み速度の向上とGutenbergの方が利便性が高さそうなのもありますが笑）

さて、前置きはこれぐらいにして、さっそく本題に入っていきます。

＊ちなみに申し訳ないのですが、Prism.jsの導入は既に済んでいるものとして話を進めさせて頂きますm(_ _)m

導入といっても「Prism.js」にアクセスして、ダウンロードして、ファイルをアップロードして、パスをfunctions.phpに記述して読み込むだけなので何も難しくないと思います。『[WordPress][シンタックスハイライター]Prism.jsでコードを綺麗に表示しよう！』この記事とか導入の参考になるかと思いますm(_ _)m

Gutenberg（ブロックエディタ）でPrism.jsを使う方法

さて、それでは早速ですが本題に入ってきます。

結論からいうと、『ブロック』＞『高度な設定』からclassのところに

「language-php」とか適宜クラスを追加するだけです。

詳しく解説していきます。

まず下記画像のようにコードのブロックを追加します。

そして次に下記のようにコードブロックの中に好きなコードを書いて、あとは『ブロック』>『高度な設定』の追加cssクラスにprism.jsを使う関数を記述すればOK。

これで下記のように表示されば完成です。

驚くほど簡単でしたね。

ちなみに、行番号も表示したい時は『language-php line-numbers』こんな感じで半角スペースを空けて記述すればOKです。

なんか少し調べてたらGutenbergでprism.jsを使うのが難しい的なことが書いていたので、少しビビってましたが超簡単で驚きました。

これを機にGutenbergを網羅していきます。（今のところ記事内でのショートカットが少し不便かなという印象。それ以外は概ねいい感じ）

ちなみに再利用ブロックにクラスを指定しておいて、コードを書く時は再利用ブロックを使うことで記述の手間が少しは減りそうな感じです。

まぁ、何はともあれやりたいことが実現できてよかったです。それではまた(*･ω･)ﾉ

シロウ

NFT・仮想通貨投資家 / エンジニア

TwitterInstagramYouTubeLINEContact

仮想通貨・NFTに400万以上投資しています。

本業エンジニア・副業ブロガー。

ブログ最高月80万円。累計200万以上。