プログラミング言語などのソースコードをサイトに載せる場合、コードは色分け表示(シンタックスハイライト)していてほしいものです。
コードは読みやすくきれいに色分け表示されていた方が、自分にとっても閲覧してくださった方にも分かりやすくなりますね。
【Code Syntax Block】は、コードを色分け表示(シンタックスハイライト)することのできるプラグイン。
ブロックエディターのみの対応ですが、HTML、PHPをはじめとした多くの言語をサポートしています。
こんな場合におススメ
- コードをきれいに色分け表示(シンタックスハイライト)したい
プラグインを使ってできること
- コードをシンタックスハイライト表示する
目次
インストール


インストール方法
- ダッシュボード > プラグイン > 新規追加 とクリックする
- Code Syntax Blockで検索する
- 今すぐインストールをクリック。インストール後有効化する
または、配布サイトからダウンロードして、インストール。
手動でインストールする方法はコチラ
【Code Syntax Block】の使用方法
STEP
ブロックを追加
投稿画面(ブロックエディター)の『フォーマット』内『コード』ブロックを追加します。

STEP
コードを記述
追加したブロックにコードを記述します。

STEP
項目の設定
『コード』ブロックを選択すると『設定』が表示されますので、項目の設定を行います。

Language | 言語を選択 |
---|---|
Show line numbers | 行番号を表示するかの選択 |
Title for Code Block | タイトルを設定(なしでも可) |
STEP
使用イメージ
保存すると、コードがシンタックスハイライト表示されます。

動作確認環境
- バージョン 1.3.1
- WordPress 5.4.1
このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。
まとめ
- 【Code Syntax Block】は、コードを色分け表示(シンタックスハイライト)することのできるプラグイン。
- ブロックエディターのみの対応ですが、HTML、PHPをはじめとした多くの言語をサポートしています。
他にシンタックスハイライト表示するプラグイン