【メモ】【WordPress】Qiitaのシンタックスハイライトライブラリに合わせてみた。スマートでかっこいいよ。

はじめに

このような、ソースコードを作成した理由は、  WordPressのテーマ『SANGO』のデフォルトのソースコードでは、色分け（シンタックスハイライト）がされていないのです。

やっぱり、ソースコードだったら色分けが欲しいですよね。一応、SANGOのデフォルトでも自分で１つ１つ色を変えることはできるのですが、かなりめんどくさいですよね。

ちょっとかっこいいソースコードを見てみようと、色々なブログのソースコードボックスを見ましたが、やはり、Qiitaのソースコードボックスが見慣れてるし見やすいですよね。

環境

WordPressのバージョン：5.3.2

WordPressのテーマ　　：SANGO

※テーマ次第でできない可能性あり

Qiitaのソースコードボックスに近づける方法

テーマSANGOでは、デフォルトでソースコードボックスが付いていますが、これは、もう使いません。新たにプラグインで上書きします。

そのため、今までのソースコードボックスのレイアウトが崩れる可能性がありますので、気をよく考えましょう。

プラグインインストール

まずは、ソースコードボックスのプラグインを追加します。

プラグインの新規追加画面で、Crayon Syntax Highlighterと検索して以下のプラグインをインストール、有効化してください。

Crayon Syntax Highlighterの設定

Crayon Syntax Highlighterの設定画面を開きます。

まずは、以下のように、設定を変更してください。

まずは、この設定をしてください。

次に、ソースコードボックスのテーマ『Monokai』を元にQiitaに近づけていきます。

Crayon Syntax Highlighterのテーマ編集

/*ここからソースコードボックスのレイアウト*/
.crayon-pre {
    padding: 30px!important;
}
.crayon-syntax {
    margin-top: 0px!important;
}
/*ここまでソースコードボックスのレイアウト*/

完成

// A sample class
class Human {
	private int age = 0;
	public void birthday() {
		age++;
		print('Happy Birthday!');
	}
}

書き方は、

  
 HTML<pre>ソースコード</pre>

こんな感じで書きます。

まとめ

みなさんできましたでしょうか。

他にもこのような、WordPressのちょっとしたカスタマイズの記事を書いているので、ぜひ呼んでください。