WordPressのSyntax HighlighterをCrayonからEnlighterへ変更した覚書

最近Webのおしごとから遠ざかってしまってWordPressにさわる機会が減ってるとはいえ、さすがに自分のブログのメンテをせねばならんとPHPのバージョンを上げてみたらCrayon Syntax Highlighterが息をしないではないですか！　ということで乗り換えたメモです。

CrayonからEnlighterへ

更新がストップしてPHP7.3以降動かなくなってしまうCrayon Syntax Highlighter。たいへんお世話になりました、ありがとうございました。可愛くて好きだったよCrayon。

そして次にお世話になろうと決めたのはEnlighterです。よろしくお願いします！

使い方

まずは使える言語やテーマをチェック。

• GitHub – EnlighterJS/EnlighterJS: an open source syntax highlighter written in pure javascript

インストールして有効化したら管理画面のEnlighter > appearanceを好みに設定します。私はDroideテーマをデフォルトにしました。

Enlighterはブロックエディタに対応しているので何も考えずに使えばよいのでしょうが、私のブログはまだ…、自テーマで…、、テキストエディタで書いておりまして……。。

そろそろ本気でブロックエディタの作り方を勉強してテーマに組み込まなきゃいけないと思っているので、そのあたりもまたブログのネタにできたらいいですね。

というわけで、のちのちブロック化するつもりとはいえ、まずどういうコードで書けばよいのか見てみます。

<pre class="EnlighterJSRAW">
中身
</pre>

最低限、"EnlighterJSRAW"というクラス名のpreタグで括ればOK。さらに以下のように書くといろんな設定ができるみたいです。

<pre
class="EnlighterJSRAW" // 必須
data-enlighter-language="言語名" // もちろんあったほうが良いけどなくても動く
data-enlighter-theme="テーマ名" // なければappearanceで設定したテーマになる
data-enlighter-highlight="1,2-3" // ハイライトしたい行
data-enlighter-linenumbers="false" // 書くとappearance設定より優先される
data-enlighter-lineoffset="5" // 書くとこの行からスタートする
data-enlighter-group="hoge" // 同じグループ名を付けるとまとめてタブで表示できる
data-enlighter-title="hoge_title1" // グループ切替タブのタイトル
>

基本は行番号表示にしておいて、今回だけ無しってこともできるのはいいかも。1～2行の短いコードなら無くてもいいですもんね。タブ表示が超簡単にできちゃうのすごい！

CSSにテコ入れする（主にWinのために）

さて、それでやってみるとですね、Winは…、、基本どのテーマもフォントが残念なんですよね……。。(´；ω；｀)ﾌﾞﾜｯ

そのままだととてもせつないので吐き出されてるenlighterjs-cssを見て、使ってるDroideテーマ部分の気になるとこを上書きするコードを自テーマCSSに追加。せっかくなのでフォントだけじゃなくて行間やツールボタンも弄りました。

!important使いまくりなのでプロの方におかれましては気持ち悪いと思われますが、自分のブログに適用するだけですのでなにとぞ…。。

/*** Syntax Highlighter Customize (Enlighter/theme:droide) ***/
.enlighter-t-droide{
	border-radius:6px!important; /* 枠を角丸へ */
	padding:15px 0!important; /* 上下に余白 */
	font-family:"Menlo","Monaco","Consolas","Sans-serif"!important; /* フォント */
}
.enlighter-t-droide .enlighter{font-size:1em!important;} /* フォントの大きさ */
.enlighter-t-droide .enlighter>div{line-height:1.1em!important;} /* 行間 */
.enlighter-t-droide .enlighter>div::before{width:3em!important;min-width:3em!important;} /* 行番幅 */
.enlighter-t-droide .enlighter-btn{ /* ここから下ツールボタン */
	width:auto!important; /* 幅 */
	height:auto!important; /* 高さ */
	border-radius:3px!important; /* 枠を角丸へ */
	padding:0 0.5em!important; /* 余白 */
}
.enlighter-t-droide .enlighter-btn:hover{background-color:#69c!important;color:#fff!important;} /* ホバー色 */
.enlighter-t-droide .enlighter-toolbar .enlighter-btn-raw{display:none!important;} /* Raw非表示 */
.enlighter-t-droide .enlighter-toolbar .enlighter-btn-copy,
.enlighter-t-droide .enlighter-toolbar .enlighter-btn-window,
.enlighter-t-droide .enlighter-toolbar .enlighter-btn-website{background-image:none!important;} /* 画像非表示 */
.enlighter-t-droide .enlighter-toolbar .enlighter-btn-copy:after{content:'Copy'} /* テキスト指定 */
.enlighter-t-droide .enlighter-toolbar .enlighter-btn-window:after{content:'Extern'}
.enlighter-t-droide .enlighter-toolbar .enlighter-btn-website:after{content:'EnlighterJS'}

なお、フォントについては以下のツイートを参考に設定しました。Winでも綺麗に表示できて嬉しい！　ありがとうございます！

CSSでコーディング用フォントを使わせたいけど、WEBフォント読み込むほどではない時。

Macなら"Menlo"、
Winなら"Consolas"が
がプリインストールのコーディング用フォントらしい。

"Menlo"の前身が"Monaco"だから、
font-family : "Menlo","Monaco","Consolas","Sans-serif";
が安定！

— SE(すみエンジニア) (@H40831) July 21, 2019

これで私の環境（Win10/chrome）では以下のような見た目になりました。（↓画像です）

iPhoneで見る限り変ではないのでiOSも大丈夫であろう（希望）。

Crayonから置き換える

さて、ここまで検証できたら置換です。私はCrayonではショートコードを使って以下のように書いていたので、

[言語名 mark="1,2-3"]
コード
[/言語名]

地道に置換していきます。

<pre class="EnlighterJSRAW" data-enlighter-language="言語名" data-enlighter-highlight="1,2-3">
コード
</pre>

ショートコード便利だからって使っちゃってたけどこういうときはアカンな…！　コードを書いてる記事が現時点で160くらいあって、確認しながらちまちまやっていま半分くらいです…。

追記

しばらく様子を見てみて、1行目が長いとツールボタンが出たときにかぶっちゃって見えないのが気になりました。

なので、CSSを以下のように変更しました。いったんRowを非表示にしてたのですがやっぱりあったほうがいいなと思ってそちらも。

/*** Syntax Highlighter Customize (Enlighter/theme:droide) ***/
.enlighter-t-droide{
	border-radius:6px!important; /* 枠を角丸へ */
	padding:15px 0!important; /* 上下に余白 */
	margin:20px 0!important;
	font-family:"Menlo","Monaco","Consolas","Sans-serif"!important; /* フォント */
}
.enlighter-t-droide .enlighter{font-size:1em!important;} /* フォントの大きさ */
.enlighter-t-droide .enlighter>div{line-height:1.2em!important;} /* 行間 */
.enlighter-t-droide .enlighter>div::before{width:3em!important;min-width:3em!important;} /* 行番幅 */
.enlighter-t-droide .enlighter-raw{font-size:1em!important;padding:0 20px!important;}/* Raw画面 */
.enlighter-t-droide .enlighter-btn{ /* ここから下ツールボタン */
	width:auto!important; /* 幅 */
	height:auto!important; /* 高さ */
	color:#AAA!important; /* 文字色 */
	font-size:0.9em!important; /* 大きさ */
	background:none!important; /* 背景 */
	border:none!important; /* 枠 */
	margin:0!important; /* 外余白 */
	padding:0 0.5em!important; /* 内余白 */
}
.enlighter-t-droide .enlighter-toolbar{top: -2px!important;} /* 位置 */
.enlighter-t-droide .enlighter-btn:hover{background-color:#69c!important;color:#fff!important;border-radius:3px!important;} /* ホバー色 */
.enlighter-t-droide .enlighter-toolbar .enlighter-btn-raw,
.enlighter-t-droide .enlighter-toolbar .enlighter-btn-copy,
.enlighter-t-droide .enlighter-toolbar .enlighter-btn-window,
.enlighter-t-droide .enlighter-toolbar .enlighter-btn-website{background-image:none!important;} /* 画像非表示 */
.enlighter-t-droide .enlighter-toolbar .enlighter-btn-raw:after{content:'Row'} /* テキスト指定 */
.enlighter-t-droide .enlighter-toolbar .enlighter-btn-copy:after{content:'Copy'}
.enlighter-t-droide .enlighter-toolbar .enlighter-btn-window:after{content:'Extern'}
.enlighter-t-droide .enlighter-toolbar .enlighter-btn-website:after{content:'EnlighterJS'}

これで以下のようになります。

ちょっと小さくて見えづらいですがかぶらないように。

ホバーはこんな感じ。