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

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

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

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

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

こんな場合におススメ

  • コードをきれいに色分け表示(シンタックスハイライト)したい

プラグインを使ってできること

  • コードをシンタックスハイライト表示する
ブロックエディターのみ対応しています。
スポンサーリンク

インストール

Code Syntax Block インストール
Code Syntax Block インストール
  1. 管理画面 > プラグイン > 新規追加 とクリックする
  2. Code Syntax Blockで検索する
  3. 今すぐインストールをクリック。インストール後有効化する

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

Code Syntax Block

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

関連記事

WordPressのプラグインをインストールする方法は、全部で3つあります。 ダッシュボードから検索してインストールする ダッシュボードからZIP形式のファイルをアップロードする FTPでサーバーにアップロードする[…]

WordPressのプラグインをインストールする方法

【Code Syntax Block】の使用方法

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

    Code Syntax Block 使用方法

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

    Code Syntax Block 使用方法

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

    Code Syntax Block 使用方法

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

    Code Syntax Block 使用イメージ

スポンサーリンク

動作確認環境

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

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

まとめ

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

他にシンタックスハイライト表示するプラグイン

コードをシンタックスハイライト表示する【Code Syntax Block】の使い方
最新情報をチェックしよう!
スポンサーリンク