コードをシンタックスハイライト表示する【Code Syntax Block】

プログラミング言語などのソースコードをサイトに載せる場合、コードは色分け表示(シンタックスハイライト)していてほしいものです。

コードは読みやすくきれいに色分け表示されていた方が、自分にとっても閲覧してくださった方にも分かりやすくなりますね。

Code Syntax Block】は、コードを色分け表示(シンタックスハイライト)することのできるプラグイン。

ブロックエディターのみの対応ですが、HTML、PHPをはじめとした多くの言語をサポートしています。

こんな場合におススメ
  • コードをきれいに色分け表示(シンタックスハイライト)したい
プラグインを使ってできること
  • コードをシンタックスハイライト表示する

ブロックエディターのみ対応しています。

目次

インストール

Code Syntax Block インストール
Code Syntax Block インストール
インストール方法
  1. ダッシュボード > プラグイン > 新規追加 とクリックする
  2. Code Syntax Blockで検索する
  3. 今すぐインストールをクリック。インストール後有効化する

または、配布サイトからダウンロードして、インストール。

手動でインストールする方法はコチラ

【Code Syntax Block】の使用方法

STEP
ブロックを追加

投稿画面(ブロックエディター)の『フォーマット』内『コード』ブロックを追加します。

Code Syntax Block 使用方法
STEP
コードを記述

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

Code Syntax Block 使用方法
STEP
項目の設定

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

Code Syntax Block 使用方法
Language言語を選択
Show line numbers行番号を表示するかの選択
Title for Code Blockタイトルを設定(なしでも可)
STEP
使用イメージ

保存すると、コードがシンタックスハイライト表示されます。

Code Syntax Block 使用イメージ

動作確認環境

  • バージョン 1.3.1
  • WordPress 5.4.1

このプラグインは上記の環境で動作を確認しましたが、ご使用の環境によっては、動作しないなどの不具合が起きる可能性がありますので、ご注意ください。

まとめ

  • 【Code Syntax Block】は、コードを色分け表示(シンタックスハイライト)することのできるプラグイン。
  • ブロックエディターのみの対応ですが、HTML、PHPをはじめとした多くの言語をサポートしています。
他にシンタックスハイライト表示するプラグイン
目次
閉じる