※本記事で使用しているデバイス情報
＜パソコン＞
機種：MacBook Air 13″
OS：macOS Sonoma 14.4.1
はじめに
みなさんは、ブログや記事を読んでいて「コード見やすいな」と思ったことはないでしょうか。
おそらくあると思います。
僕は先日、SWELL開発者の了さんのブログ「WEMO.teck」を読んで思いました。
そこで、どのようにしたらブログにプログラミングコードをきれいに表示させることができるのかを調べてみました。
プログラミングコードをきれいに装飾した状態でブログに表示させる方法はいくつか存在しますが、今回はプラグインを用いた方法を紹介します。
使用するプラグインは、「Highlighting Code Block」です。
WordPressテーマ「Swell」の開発者である了さんもこのプラグイン開発に携わっているそうです。
インストール方法
WordPressの管理画面を開き、「プラグイン」を選択します。
「新規プラグインを追加」を押して、検索部分で「highlighting code block」を検索します。
すると、以下のように表示が出ます。
右上に「今すぐインストール」と表示が出るので、クリックします。
インストールが完了すると、「有効化」ボタンが表示されるので有効化しましょう。
※ 僕は、すでにインストールして有効化を完了させているので、先ほどの画像のようになっています。
使用方法
今回は、ブロックエディターでの使用方法を紹介します。
プラグインをインストールしたら、記事の編集画面から使用することができます。
エディター内で「ブロック挿入ボタン」をクリックすると、「Highlighting Code Block」というブロックを選択できるようになっています。
このブロックは、「①ブロックツールバー」と「②ブロックサイドバー」から設定を変更することができます。
「①ブロックツールバー」からは、言語設定の変更が可能です。
「②ブロックサイドバー」からは、言語設定、行数の表示設定、言語の表示設定、ファイル名表記、ハイライトする行番号、開始番号の変更が可能です。
Highlighting Code Blockの設定について
プラグイン「Highlighting Code Block」に関する設定は、「設定」項目内の「[HCB] 設定」項目から可能です。
基本設定
ここでは、基本設定にの主な設定項目について紹介します。
言語の表示
「コードブロックに言語名を表示する」にチェックを入れると、コードの言語名が表示されます。
行数の表示設定
「コードブロックに行数を表示する」にチェックを入れると、左側に行数が表示されます。
コピーボタン
「コードブロックにコピーボタンを表示する」にチェックを入れると、ユーザーがボタンをクリックすることでコピーできるようになります。
コードカラーリング（カラーを変更）
フロント側（ユーザー視点）、エディター側（記事の執筆者視点）のカラーリングを「Light」と「Dark」からお好みに合わせて選ぶことができます。
言語を追加する方法
次に、高度な設定の使用言語の追加方法について紹介します。
このプラグインには、デフォルトで以下の言語が搭載されています。
- 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画面の「ファイルマネージャー」を選択します。
そして、ダウンロードしたprism.jsを使用しているテーマファイルに格納します。
自分がファイルをアップロードした場所を記述します。
最後に、「設定を保存」を押して終了です。
コメント