[WordPress]Highlighting Code Blockの概要と使い方

WordPressでは、プラグインで機能を拡張することができます。
本記事では、Highlighting Code Blockの概要と使い方を紹介します。

やすひら

Highlighting Code Blockの概要と使い方を紹介します

Highlighting Code Blockとは

WordPressで技術ブログを運営する場合、記事にソースコードを表示することが多くあります。
プラグインの”Highlighting Code Block”では、読みやすい表示形式でソースコードを記事内に表示することができます。

ソースコード

#include <stdio.h>

int main() {
    long n, i;
    double pi = 0.0;
    long max_iterations = 1000000; // 計算の繰り返し回数を指定

    for (i = 0; i < max_iterations; i++) {
        if (i % 2 == 0) {
            pi += 1.0 / (2.0 * i + 1.0);
        } else {
            pi -= 1.0 / (2.0 * i + 1.0);
        }
    }

    pi *= 4.0; // πの計算

    printf("Calculated value of Pi: %.15f\n", pi);

    return 0;
}

Highlighting Code Blockの特徴

Highlighting Code Blockは以下の特徴があります。

• クラシックエディタに対応
• ブロックエディタ(Gutenberg)に対応
• シンタックスハイライトで表示可能
• 行数を表示可能
• コピーボタンを表示可能
• プログラミング言語の名称を表示可能

WordPressの新旧エディタに対応しています。
ソースコードをプログラミング言語の文法がわかりやすく色で表示されます。
ソースコードのコピーボタンが表示されます。
プログラミング言語が表示できます。

Highlighting Code Blockのインストール方法

Highlighting Code Blockのインストール方法を紹介します。

管理画面でプラグインを選択

管理画面でプラグインを選択します。

ブラウザ画面

[プラグイン]をクリックします。

新規プラグイン追加画面に遷移

新規プラグイン追加画面に遷移します。

ブラウザ画面

[新規プラグインを追加]をクリックします。

プラグインを検索

プラグインを検索します。

ブラウザ画面

プラグインを検索に”Highlighting Code Block”を入力します。

プラグインをインストール

プラグインをインストールします。

ブラウザ画面

[今すぐインストール]をクリックします。

プラグインを有効化

プラグインを有効化します。

ブラウザ画面

[有効化]をクリックします。

プラグインを選択

プラグインを選択します。

ブラウザ画面

[プラグイン]を選択します。
[Highlighting Code Block]をクリックします。

プラグインを設定

プラグインを設定します。

ブラウザ画面

Highlighting Code Blockの設定をします。

Highlighting Code Blockの使い方

Highlighting Code Blockの使い方を紹介します。

投稿画面でブロックを追加

投稿画面でブロックを追加します。

ブラウザ画面

投稿画面でブロックを追加します。

Highlighting Code Blockを選択

Highlighting Code Blockを選択します。

ブラウザ画面

Highlighting Code Blockを選択します。

Highlighting Code Blockの追加

Highlighting Code Blockが追加されます。

ブラウザ画面

Highlighting Code Blockが追加されます。

Highlighting Code Blockを編集

Highlighting Code Blockを編集

ブラウザ画面

Highlighting Code Blockにソースコードを記述します。
プログラミング言語を選択します。
行数の表示有無を選択します。
言語の表示を選択します。
ファイル名を入力します。

Highlighting Code Blockの表示を確認

Highlighting Code Blockの表示を確認します。

ブラウザ画面

Highlighting Code Blockの表示を確認します。

まとめ

Highlighting Code Blockの概要と使い方を紹介しました。

Highlighting Code Blockは技術ブログを運営する場合に有効なプラグインの1つです。
プラグインをインストールして、自分好みにカスタマイズしていきましょう。