【Luxeritas】ルクセリタスのシンタックスハイライターをCrayonSyntaxHighlighterで表示する方法【WordPress】

WordPressのテーマLuxeritas(ルクセリタス)ではバージョン3.1.0以降、シンタックスハイライターの機能がつきました。

バージョン3.6.0の現在ではブロックエディタでのみシンタックスハイライターが使用できますが、Luxeritasのシンタックスハイライター機能を使うと、CrayonSyntaxHighlighterで映るものの、色味が言語Defaultになってしまいます。

そこで今回は、Luxeritasのシンタックスハイライターを使ってCrayonSyntaxHighlighter用にcssを追加する方法をご紹介します。

ルクセリタスのシンタックスハイライターをCrayonSyntaxHighlighterで表示する方法

1. ブロックエディタでソースコードを追加

Luxeritasのブロックエディタでブロックを追加するときに

ブロックを追加(+) > フォーマット > ソースコード

を選びソースコードを入力します。

2. ソースコードのブロック設定で高度な設定を追加

次にソースコードを選択(入力状態)にすると右側が変化するので、高度な設定 をタップし追加のCSSクラスを設定します。

追加するcssは以下のうようにします。

lang:swift swift
lang:objc objectivec
lang:php php

lang:~~~ と ~~~のようになっているのはCrayonSyntaxHighlighterのcssとLuxeritasのシンタックスハイライターprismのcss2つを書くようにしているからです。

もしCrayonSyntaxHighlighterをやめても、prismのcssが効くように念の為2つのcssを設定しています。

以上で設定はおわりです。

3. 実際にcssの設定を比較

デフォルトでswiftを表示するとこんな感じ

CrayonSyntaxHighlighterのswift設定を入れるとこうなります。

letや定数の1にしっかり色が入りみやすくなりますね!

少々面倒ですが、cssの追加設定をすることで色味も綺麗になりますし、もしCrayonSyntaxHighlighterを使うのをやめたとしてもprismに綺麗に移行できるので設定することをおすすめします。