WordPressでソースコードを記載したいときに、単色だと非常に見づらいです。そんな時はプラグインを利用することでコードをハイライト表示することが可能です。
プラグインといっても種類がいくつもありますが、私が最もおすすめしたいHighlighting Code Block の使い方を記載します。
Highlighting Code Block とは
Highlighting Code Block は、prism.js を使用したシンタックスハイライト機能付きのコードブロックを追加します。
下記のように見やすく表示してくれます。
デフォルトの設定では下記の画像の通り、配色パターンはLightとDark、対応言語はメジャーなものが設定可能となっています。
コードカラーリング
対応言語
※配色パターンや対応言語は追加で設定することが可能です。
例えば、Go言語を使いたい場合はデフォルトでは含まれていませんので、手動で追加する必要があります。
シンタックスハイライトの機能はprism.js を使っています。このprism.jsを対応したい言語を追加して、参照するようにすればカスタマイズすることが可能です。手動で追加するやり方は後述します。
設定方法
「Highlighting Code Block」プラグインをインストールして、有効にします。
ブロックエディタで「high」と入力すると、下記のように表示されます。
選択して、ソースコードを入力します。その後、プログラミング言語を選択します。
※言語を選択しないと、ハイライト表示されません。
プレビューで見てみると、ハイライト表示されていることが確認できました。
対応言語、配色パターンのカスタマイズ方法
言語の設定
Go言語をハイライト表示したい場合、デフォルトの設定ではできません。その場合は、prism.jsをカスタマイズしたものを準備する必要があります。設定方法を下記にまとめます。
①「設定」＞「[HCB]設定」を選択します。
②画面最下部の「ヘルプ」にあるリンクをクリックします。
③リンク先の「Language」からGo言語にチェックを入れます。
※他にも必要/不要な言語あれば、適宜チェックを付け外しして下さい。
④画面最下部の「DOWNLOAD JS」と「DOWNLOAD CSS」をそれぞれクリックして、ダウンロードします。
⑤ダウンロードしたファイルをサーバにアップロードします。
アップロード先は使っているテーマ内の任意の場所です。
「~/wp-content/themes/テーマ名/」
⑥アップロードしたパスを入力します。
⑦「使用する言語セット」に追加したい言語を追加します。
GO言語の場合、「go:”GO”,」を追加します。
指定するキー名は、こちらから確認できます。
⑧変更を保存します。
※保存を忘れずに行ってください。
上記の手順を一通り行うことで、GO言語がハイライト表示されることが確認
package main
import "fmt"
func main() {
fmt.Println("hello world")
}配色パターンの設定
デフォルトではLightとDarkの2パターンですが、prismのダウンロードサイトでは8パターン選択することができます。
言語の設定と同様に設定可能です。「Themes」から好きな配色を選択して下さい。
おすすめの配色をご紹介します。個人的には Tomorrow Night が好きです。
Default
Coy
Okaidia
Tomorrow Night
