WordPress

【WordPress】ソースコードをハイライト表示する Highlighting Code Blockの使い方

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

エンジニアの転職ならこれ!

【第二新卒向け】マイナビジョブ20's

マイナビジョブ20'sは、20代・第二新卒・既卒向けの転職エージェントです。

▼こんな方におすすめ
・はじめて転職しようと思っている
・転職できるだけのスキルが自分にあるか不安
・手厚いサポートを受けたい

【フリーランス向け】 Midworks

Midworksは豊富な案件と「フリーランス」と「正社員」の良いとこ取りをした働き方を実現する手厚い保障が特徴です。

▼こんな方におすすめ
・現在正社員でフリーランスになろうか悩んでいる
・フリーランスとして働いているが、先行きが不安がある  (安定的な案件確保や保障など)
・自分の市場価値を知りたい、見合った案件で参画したい
・今後のキャリアビジョンを踏まえて案件を選びたい