プラグイン情報
| プラグイン名 | Highlighting Code Block |
|---|---|
| 動作環境 | ワードプレスバージョン：5.6以降 PHPバージョン：5.6以降 |
| 詳細・ダウンロード | https://ja.wordpress.org/plugins/highlighting-code-block/ |
目次
1. Highlighting Code Blockとは？
prism.jsを使用したシンタックスハイライト※1機能付きのコードブロック※2を追加できるプラグイン。
※1 シンタックスハイライトとは、テキストエディタの機能で、キスト中の一部分をその分類ごとに異なる色やフォントで表示するもの。
※2 コードブロック（ブロック）とは、プログラミング言語でコードのまとまりのこと。
2. Highlighting Code Blockで出来ること・特徴（ざっくり）
- ブロックエディター・旧エディターの両方に対応（ブロックエディターでの使用推奨）
- コードブロックに言語を表示できる
- コードブロックに行数を表示できる
- コードブロックにコピーボタンを表示できる
- コードカラーリングをLightとDarkから選択できる
3. Highlighting Code Blockの設定画面
3-1. 設定画面
私の設定はこんな感じ。
3. Highlighting Code Blockの設定と出来ること
「基本設定」で出来ること
各設定項目のまとめ。すべての項目の設定を行う必要はないので、用途に応じて必要な部分だけ設定を。
| ① 言語の表示 | チェックを入れると、フロント側のコードブロックの右上に「言語の種類」が表示される。 ★一目で「言語」が分かる方が良いので、チェック。 |
|---|---|
| ② 行数の表示設定 | チェックを入れると、フロント側のコードブロックの右上に「行数」が表示される。 ★行数がある方が見やすく、何かと便利なので、チェック。 |
| ③ コピーボタン | チェックを入れると、フロント側のコードブロックの右上に「コピーボタン」が表示される。 ★内輪用としてコピーボタンはあった方が便利なので、チェック。 |
| ④ フォントスムージング | チェックを入れると、コードブロックに「-webkit-font-smoothing: antialiased;」と「-moz-osx-font-smoothing: grayscale;」が追加される。 ★テーマのcssにフォントスムージングの記述が入っていれば問題ないはずなので、OFF。 |
| ⑤ コードカラーリング（フロント側） | フロント側のコードブロックのカラーリングを選択できる。 →「Light」or「Dark」のどちらかを選択。 ★私的には「Dark」の方が視認性が高く感じられたので、「Dark」を選択。 「Light」だとこんな感じ。 |
| ⑥ コードカラーリング（エディター側） | エディター側のコードブロックのカラーリングを選択できる。 →「Light」or「Dark」のどちらかを選択。 「Light」だとこんな感じ。 |
| ⑦ フォントサイズ（PC）／⑧ フォントサイズ（SP） | ⑦ フォントサイズ（PC）：PC表示の際のフォントサイズを指定できる。 ⑧ フォントサイズ（SP）：スマホ表示の際のフォントサイズを指定できる。 |
| ⑨ コードの”font-family” | コードブロック内のfont-familyを指定できる。 ★デフォルトのままでも差し支え無いので、指定無しで。 |
「高度な設定」で出来ること
| ⑩ 使用する言語セット | 使用する言語をセットできる。 →セットした言語はエディターのプルダウンに表示される。 ★私の場合、使用する言語は限られるので、使い勝手が良くなるように最小限の言語をセット。  |
|---|---|
| ⑪ 独自カラーリングファイル | オリジナルのコードカラーリング用CSSファイルを設定するすることが出来る。 →デフォルトのcss（prism.css）は、こちら（ページ下部）からダウンロード可能。 →指定の箇所にcssファイルをアップロードし、ファイル名を入力。 |
| ⑫ 独自prism.js | デフォルトでサポートされていない言語を追加することが出来る。 →デフォルトのcss（prism.js）は、こちら（ページ下部）からダウンロード可能。 →指定の箇所にjsファイルをアップロードし、ファイル名を入力。 |