WordPress 5系で新しくなったエディタ(ブロックエディタ、もしくはGutenbergというらしいですね)を使いにくいと感じていたので、つい最近まで4系のまま使い続けていたのですが、サポート期間終了の警告が出るようになってしまったので、諦めて5系にバージョンアップしました。
この新しいエディタには慣れるしか無いので諦めて使っていこうと思います。
実は先日のBar Chart Raceの記事はブロックエディタで書いたのですが、ソースコードのシンタックスハイライトをやってくれているPrism.js を動作させる方法がなかなかわからず苦戦したので、使い方を記録しておこうと思います。
Prismjs のページで公式な対処法を探したのですが、そこでは記載を見つけられなかったのであくまで僕はこうやって解決したという非公式な方法になります。
具体的には、次の手順でprismjsが動作してくれます。
- ブロックを追加するときに、「コード」のブロックを選択して追加する。
もしくはブロック追加後に + ボタンを押して「コード」に変換する。 - 右ペインのメニューの「ブロック」の「高度な設定」タブを開き、追加 CSS クラスに「language-python」など、有効化したい言語のクラスを設定する。
例えば、ブロックを「コード」にしただけで、追加CSSを設定しないと次のような表示になります。
print("Hello World!")追加CSSにlanguage-pythonを入れるとこうなります。
print("Hello World!")公式ドキュメント等で確認できてないので少々不安ではありますが、ちゃんと動作してるように見えますね。