【動作環境】
＜パソコン＞
機種：MacBook Air（13inch）
OS：macOS Sonoma（14.4.1）
今回は、『Highlighting Code Block』プラグインを使って、ブログ記事のプログラムコードを見やすく装飾する方法について解説します。
Highlighting Code Block とは
Highlighting Code Block は、ブログ記事でプログラムコードを見やすく表示させるWordPressのプラグインです。
以下のように、コードを装飾して見やすくすることができます。
さらに、右上にコピーボタンがあるので、簡単にコピーすることもできるようになります。
このプラグインの開発者は、WordPressテーマ「Swell」の開発者である了さんです。
インストール方法
WordPressの管理画面を開き、［プラグイン］をクリックします。
［新規プラグインを追加］をクリックして、検索ボックスに「highlighting code block」と入力します。
すると、以下のように表示が出ます。
右上に［今すぐインストール］ボタンが表示されるので、クリックします。
インストールが完了すると、［有効化］ボタンが表示されるので有効化しましょう。
※ 僕は、すでにインストールして有効化を完了させているので、先ほどの画像のようになっています。
使用方法
プラグインをインストールしたら、記事の編集画面から使用することができます。
エディター内で［ブロック挿入ボタン］をクリックすると、［Highlighting Code Block］というブロックを選択できるようになっています。
ブロックを設置すると、以下のようになります。
①を［ブロックツールバー］といい、言語設定を変更することができます。
②を［ブロックサイドバー］といい、言語設定、行数の表示設定、言語の表示設定、ファイル名表記、ハイライトする行番号、開始番号を変更することができます。
Highlighting Code Blockの設定について
プラグイン『Highlighting Code Block』に関する設定は、［設定］内の［[HCB] 設定］から可能です。
![「設定」->「[HCB] 設定」](https://chiebukurozero.com/wp-content/uploads/2023/12/image.png)
基本設定
ここでは、基本設定の主な設定項目について紹介します。
![[HCB]設定：基本設定 の画面](https://chiebukurozero.com/wp-content/uploads/2023/12/スクリーンショット-2023-12-18-13.47.51-1024x623.png)
言語の表示
［コードブロックに言語名を表示する］にチェックを入れると、コードの言語名が表示されます。
行数の表示設定
［コードブロックに行数を表示する］にチェックを入れると、左側に行数が表示されます。
コピーボタン
［コードブロックにコピーボタンを表示する］にチェックを入れると、ユーザーがボタンをクリックすることでコピーできるようになります。
コードカラーリング（カラーを変更）
フロント側（ユーザー視点）、エディター側（記事の執筆者視点）のカラーリングを「Light」と「Dark」からお好みに合わせて選ぶことができます。
言語を追加する方法
次に、高度な設定の使用言語の追加方法について紹介します。
![[HCB]設定：高度な設定 の画面](https://chiebukurozero.com/wp-content/uploads/2023/12/スクリーンショット-2023-12-18-14.12.12-1024x700.png)
このプラグインには、デフォルトで以下の言語が搭載されています。
- HTML
- CSS
- SCSS
- JavaScript
- TypeScript
- PHP
- Ruby
- Python
- Swift
- C
- C#
- C++
- Objective-C
- SQL
- JSON
- Bash
- Git
ですが、これらの言語の他にも使用したい言語が出てくる場合があります。
その場合は、言語を追加することで使用が可能になります。
HCB設定ページ内の［使用する言語セット］を編集します。
サポートする言語のリストを、 クラスメイ：”表示名” という形で、 , 区切りで入力します。
例：PerlとGoも選択できるようにする
html:"HTML",
css:"CSS",
... other languages ...
perl:"Perl",
go:"Go",こうすることで、セレクトボックスの言語リストに項目が追加されます。
先ほどの［[HCB]設定：高度な設定］ページの［ヘルプ］にある［こちら］を選択します。
すると、以下のページが表示されるので、使用したい言語にチェックを入れていきます。
そして、下の方にある［ダウンロード］ボタンをクリックして、ダウンロード完了です。
僕は、レンタルサーバー『ConoHa Wing』を使用しているので、ConoHa での設定方法を紹介します。
ConoHa の管理画面を開きます。
1: ［サイト管理］をクリックします。
2: ［ファイルマネージャー］をクリックします。
1: public_htmlをクリックします。
2: 設定を変更するサイト名のフォルダーをクリックします。
3: wp-contentをクリックします。
自分がファイルをアップロードした場所を記述します。
最後に、［設定を保存］をクリックして終了です。
これにて、『Highlighting Code Block』プラグインを使って、ブログ記事のプログラムコードを見やすく装飾する方法の解説を終わります。
コメント