ワードプレス(WordPress)の投稿ページ等にHTMLやCSSのスクリプトやプログラム言語のコードを記載する際に見やすく表示することがきるプラグイン Highlighting Code Block を解説します。
- Highlighting Code Block の使い方と詳細な設定方法がわかります
Highlighting Code Block で実現できること
Highlighting Code Block プラグインを入れるとブログサイトに表示するHTMLやCSS、PHPなどのスクリプトコードを見やすくカラフルに表示することができます。
- HTML等のスクリプトやプログラムコード等を見やすく表示してくれる
Highlighting Code Blockプラグインを使って表示させたHTMLコード↑Highlighting Code Blockプラグインを実際に利用して表示させています。
Highlighting Code Block はprism.jsファイルを利用したプラグインです
Highlighting Code Block のインストール方法
Highlighting Code Block プラグインをWordPressにインストールする方法を解説します。
WoredPressのダッシュボード(管理者画面)の新規プラグイン追加画面- 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の設定画面はダッシュボード(管理画面)にある「Enlighter」です。
WordPressのダッシュボード(管理画面)↑Highlighting Code Blockの設定画面はWoredPressのダッシュボード(管理者画面)の「[HCB]設定」をクリックします。
Highlighting Code Block の設定
Highlighting Code Blockの設定画面は日本語です。
設定を変更する箇所はありません。初期設定の状態のままで利用可能です
Highlighting Code Blockの設定画面| 設定項目名 | 意味 |
|---|---|
| 言語の表示 | コードブロックに言語名を表示する |
| 行数の表示設定 | コードブロックに行数を表示する |
| コピーボタン | コードブロックにコピーボタンを表示する |
| フォントスムージング | フォントスムージングをオンにする |
| コードカラーリング（フロント側） | 一般公開画面のカラーを指定 |
| コードカラーリング（エディター側） | 投稿編集画面内のカラーを指定 |
| フォントサイズ(PC) | PCでの文字の大きさを指定 |
| フォントサイズ(SP) | スマホでの文字の大きさを指定 |
| コードの“font-family” | コードのフォントファミリーを指定 |
| 使用する言語セット | 使用予定のプログラミング言語を指定。ここにないプログラミング言語は独自prism.jsで設定が必要 |
| 独自カラーリングファイル | prism.cssファイル保存ディレクトリを指定すると任意のコードカラーを設定可能 |
| 独自prism.js | prism.jsファイル保存ディレクトリを指定すると独自設定を読み込ませることが可能 |
Highlighting Code Blockの設定は好みのコードカラーリング(フロント側)を変更する以外、とくに変更する箇所はありません。初期設定の状態のままで大丈夫です
おすすめの設定
Highlighting Code Blockのおすすめのテーマ設定を紹介します。
テーマ
- オススメは背景が黒のテーマです。完全にモノクロのテーマはないので、完全に好みになりますが。なかでもBlackboardとCobaltは視認性が良いのでおすすめです。
次項で全58種類あるテーマの画面をすべて載せているので参考にしてください。
なお、テーマ以外の設定項目は初期設定の状態がおすすめです。
コードカラーリング毎のデザインの違い
Highlighting Code Blockには2つのカラーリングを選択できます。
Light
Highlighting Code Blockのコードカラーリング設定：「Light」Dark
Highlighting Code Blockのコードカラーリング設定：「Dark」Highlighting Code Blockの使い方
Highlighting Code Blockはブロックエディタとクラシックエディタの両方で利用可能です。
ブロックエディタ
使って、実際に投稿ページでコードを見やすく設定する手順と方法を解説します。
ブロックエディタの投稿を編集画面↑ブロックを追加します。
ブロック追加画面↑「Highlighting Code Block」が追加されているのでクリックします。
Highlighting Code Blockの編集画面↑編集画面が開くので、テキストボックスにコードを入力し、下の「-Lanq Select-」をクリックします。
プログラミング言語一覧↑入力したコードテキストと同じ言語を選択します。
Highlighting Code Blockの編集画面でコードを入力した状態↑以上がブロックエディタでHighlighting Code Blockを使う方法です。
クラシックエディタ
クラッシクエディタではビジュアルエディタを利用します。
投稿を編集のビジュアルエディタ画面↑投稿記事の編集画面でコードテキストを入力したい箇所でツールバー内のあるCode Blockをクリックします。
Highlighting Code Blockのコード入力画面↑入力したいコードテキストと同じ言語を選択します。
投稿を編集のビジュアルエディタ画面↑/* Your code... */と表示されるので、その上からコードテキストを入力します。
以上がHighlighting Code Blockの使い方です。
まとめ
Highlighting Code Blockを利用するとHTMLやCSSなどの解説記事を作成するときに、メリハリを付けて視認性を向上して見やすく表示させることができます。
プラグインを有効化するだけで、初期設定のままで利用することが可能です。
数多くあるコードを見やすくするシンタックスハイライタープラグインの中でもかなりシンプルで使い易いです。しかも日本語表示で設定も簡単で、しっかりとアップデートもされているのでセキュリティ面でも安心して利用できます。
シンタックスハイライター機能にprism.jsを利用しているので、Wordpressの有料テーマを利用していてシンタックスハイライターにprism.jsを利用している場合はHighlighting Code Blockプラグインを有効化しても反映されません。
例えばWordpressの有料テーマ「JIN」を利用している場合はHighlighting Code Blockを使うことはできません。同じ機能が既に実装されているので競合するためです。
それと、もしHighlighting Code Blockのコードカラーが気に入らなくて他のカラーを使いたい場合は、prism.jsを直接導入したほうが、プラグインではないため余計なものが無い分、動作が軽くなります。
prism.jsシンタックスハイライターを使う場合は具体的な手順を解説した記事を作っているので参考にしてください↓
