プログラムなどのコードをブログで紹介する人にとっては、分かりやすく綺麗にソースコードを表示させることが重要です。
ですが、ソースコードを表示させるプラグインは多数存在しており、一体どれが良いプラグインなのか分かりづらいです。
- WordPressの記事内にプログラムなどのソースコードをかっこよく表示させたい
- ソースコードを表示させるプラグインでおすすめを知りたい
この記事では、簡単にかっこよく綺麗なソースコードの埋め込みが出来るプラグイン「Highlighting Code Block」を紹介します。
プラグイン「Highlighting Code Block」の開発者は、テーマのSWELLの開発者と同じ方なので、特にSWELLを使っている方におすすめのプラグインです。
＼本サイトで使用中のWordpressテーマ／
「Highlighting Code Block」のカラーリング
「Highlighting Code Block」のカラーリングは「Light」と「Dark」の２種類で、ブロックエディターとクラシックエディター（旧エディタ）の両方に対応しています。
対応している言語
現在「Highlighting Code Block」は、17種類のプログラミング言語に対応しています。
- HTML
- CSS
- SCSS
- JavaScript
- TypeScript
- PHP
- Ruby
- Python
- Swift
- C
- C#
- C++
- Objective-C
- SQL
- JSON
- Bash
- Git
そして、設定で言語を追加することも出来ます。
「Highlighting Code Block」のインストール・有効化
まず、Wordpressに「Highlighting Code Block」をインストールして有効化しましょう。
- 管理画面「プラグイン」→「新規追加」をクリックします。
- 検索窓に「Highlighting Code Block」を入力します。
- 「Highlighting Code Block」が表示されたら、「今すぐインストール」をクリックします。
インストールが終了したら「有効化」をクリックします。
これで「Highlighting Code Block」のインストールが終了しました。
「Highlighting Code Block」の設定方法
管理画面から「設定」→「[HCB設定]」を開きます
特に初期設定のままで動作するので、通常で使用する分には設定は必要がありません。
カラーリングはデフォルトでは「Light」（フロント側とエディタ側）となっていますので、変更したい場合は「Dark」（フロント側とエディタ側）を選んで「変更を保存」します。
「Highlighting Code Block」の使い方
記事の編集ページ（ブロックエディタ）で、「Highlighting Code Block」を使用してみましょう。
投稿編集画面でブロックを追加で「Highlighting Code Block」を選択します。
- ソースコード記述場所
- 使用言語を選択します
- ファイル名を記入します（表示されます）
- data-line属性値：記入したライン（数）が強調表示されます
次のように記入してみました。プレビューするとどうなるでしょうか。
プレビュー画面でこのような表示になりました。
右上の四角いファイルマークをクリックするとソースコードをコピーすることが出来ます。
その場合、ソースがすべて選択状態になり右上に「Copied!」と表示されます。
まとめ
簡単に綺麗にソースコードの埋め込みが出来るプラグイン「Highlighting Code Block」を紹介しました。
この記事ではブロックエディタで紹介しましたが、「Highlighting Code Block」はクラシックエディタ（旧エディタ）も対応しています。
