Enlighter - Customizable Syntax Highlighterのカスタマイズができなかったので自力でCSS書いた件
こんにちは、その日暮らしです。
今日は、記事に貼ったコードのハイライト具合を調整するためプラグインEnlighter - Customizable Syntax Highlighterをカスタマイズしようとしたところ、なぜかカスタマイズができなかった件について書いてみたいと思います。
結果としては、カスタマイズは諦めて自力でCSSを書いてしまいました。
プラグインが思った通りに動かないとブログ初心者じゃなくてもいらいらしますよね。
需要があるかどうかわかりませんが、今回の体験談を記事にしてシェアしておきたいと思います。
Enlighterを使う理由
なぜかというと、表示したいコードに「[」や「]」が含まれていても正しく動作するハイライターがこのEnlighter - Customizable Syntax Highlighter(以下Enlighter)しかなかったからです。
他のハイライターでは、コードに「[」や「]」が含まれていると表示が乱れたり、「<」と「>」が「<」と「>」のようにエスケープされたままのものが表示されたり、ビジュアルエディタに対応してなかったり、ちょっと見た目がダサかったり、と使えませんでした。
Enlighterではコードに「[」や「]」が含まれていても問題なくハイライトできました。
それに、名前にCustomizableとあるだけあって細かい設定ができるのも魅力でした。
事の発端
Lighthouse(Webページを4つの視点で監査するブラウザ上のツール)で遊んでいたのが事の発端です。
使ってるテーマLuxeritasが優秀すぎてなにも考えずに記事を書いてもLighthouseで測るとそれぞれの測定値はだいたい90点台後半です(ただしモバイルのPerformanceは除く)。
https://thk.kanzae.net/wp/昨日もLighthousで遊んでてBest PracticeとSEOを100点にしてみました。今日もその続きとして残りのAccessibilityの満点を目指して頑張っていました。
ということで、Accessibilityの測定結果を見てみます。どうやら、Enlighterを使ってソースコード類を貼ってる箇所で文字と背景のコントラス比が足りないって怒られているようです。
Enlighterのカスタマイズ
しょうがないのでEnlighterをカスタマイズしようと思います。
言語の予約語や演算子やメソッドや定数や変数やコメントやらなんやらをボールドにしたりもっと濃いい色に変えてやったりで対処します。
カスタマイズのやりかたとしては、Enlighter付属のいくつかのテーマから1つを選んでそれに対してカスタマイズしていくという流れになります。
このEnlighterというハイライターは、付属のテーマから1つ選んで吊るしのまま使うか、カスタマイズしたければ同様に付属のテーマから1つ選んでさらに「ロード」という操作を行う必要があります。「ロード」すれば、さらなるカスタマイズをEnlighterの設定画面から行うことができるようになります。「ロード」しなければテーマを吊るしのまま使うしかありません。
なお、私はテーマEclipse(前職ではEclipse上でJava書いてた)を吊るしのまま少々CSSを追加して使っています。
Forbidden accessが発生
早速テーマにEclipseを選んで「ロード」して「変更を保存」ボタンを押します。
ところが、Forbidden accessのエラーが発生して前に進めません。
おかしいなと思い、Enlighterの無効化有効化やアンインストール再インストールを試してみたりしてもForbiddenのままです。
WAFの除外設定
そういえば、こういうときはWAF疑うんだっけ？
そう思いWAFのログを見たところ、攻撃元IPアドレスがしっかりうちの光回線のIPv4アドレスでした。どうやら「変更を保存」ボタンの押下がSQLインジェクションと誤認されてしまってたようです。
すぐさまうちのIPv4アドレスをWAFに除外アドレスとして登録して再度「変更を保存」ボタンを押下するとめでたく成功。
用が済んだらWAFの除外登録はすぐに解除します。
理由は、うちの光回線はv6プラス(MAP-E)で、この仕組み上うちに割り当てられているIPv4アドレスは他の人の回線と共有されているからです。WAFに除外アドレスとして登録したままだとこのIPv4アドレスを共有している人のところからスルーで攻撃ができてしまいます。まあ攻撃される可能性は低そうですが、その可能性はゼロじゃないのでWAFの除外登録はしっかり解除しておきます。
Enlighterのカスタマイズできず
これでようやくカスタマイズの出発点に到達できました。
それじゃあと思い、現状のハイライト具合を見てみます。
あれ？ まっさらです。Eclipseが出発点じゃないの？ しかも、コピペボタンも消えちゃってるし。
これってまったくの一からカスタマイズしていけってことでしょうか？
加えて、吊るしのテーマEclipseに追加していたCSSもなかったことになってます。きっと、idやclassなどが変わってしまってセレクター指定が効かなくなっているのでしょう(HTMLを調べてないから想像です)。
自力でCSSを追加
テーマEclipseに追加してたCSSがなかったことになるのは厳しいです。これなら、テーマEclipseを吊るしの状態に戻してCSSを自力で追加してった方が楽そうです。
それにスタイルの設定がいろんなところに散らばってるより1つのファイルstyle.cssにまとまってた方がメンテナンス性高そうですよね。
で、元の吊るしのテーマEclipseに戻し、1つずつCSSを追加しました。
頑張った結果がこちら。現状ではCSSとPHP向けのCSSだけですが16個ほど追加(2021/10/2時点ではHTMLとJavaScriptとPythonにも対応し23個追加)しました。
というわけでめでたくAccessibility満点達成！
まあ、自己満足の世界ですが、なにかに集中して頑張れるってことはいいことですね。
追加したCSS(2021/10/2更新)
最後に追加したCSSを貼って終わりたいと思います。コピペフリーなので皆さんよかったら使ってやってください。
/* テキストの色 */
#main #core .enlighter-t-eclipse .enlighter-text {
font-weight: bold;
color: #000;
}
/* コメントの色 */
#main #core .enlighter-t-eclipse .enlighter-c0 {
font-weight: bold;
color: #416802;
}
/* コメントの色 */
#main #core .enlighter-t-eclipse .enlighter-c1 {
font-weight: bold;
color: #416802;
}
/* 記号の色 */
#main #core .enlighter-t-eclipse .enlighter-g1 {
font-weight: bold;
color: #000;
}
/* PHPのキーワードの色 */
#main #core .enlighter-t-eclipse .enlighter-k0 {
font-weight: bold;
color: #866206;
}
/* PHPのキーワードの色 */
#main #core .enlighter-t-eclipse .enlighter-k1 {
font-weight: bold;
color: #060886;
}
/* PHPの変数の色 */
#main #core .enlighter-t-eclipse .enlighter-k7 {
font-weight: bold;
color: #000;
}
/* Pythonのパッケージの色 */
#main #core .enlighter-t-eclipse .enlighter-k10 {
font-weight: bold;
color: #000;
}
/* PHPのメソッドの色 */
#main #core .enlighter-t-eclipse .enlighter-m0 {
font-weight: bold;
color: #800080;
}
/* PHPのプロパティの色 */
#main #core .enlighter-t-eclipse .enlighter-m1 {
font-weight: bold;
color: #b80074;
}
/* JavaScriptのメソッドの色 */
#main #core .enlighter-t-eclipse .enlighter-m3 {
font-weight: bold;
color: #7f007f;
}
/* 数値の色 */
#main #core .enlighter-t-eclipse .enlighter-n0 {
font-weight: bold;
color: #000;
}
/* 数値の色 */
#main #core .enlighter-t-eclipse .enlighter-n1 {
font-weight: bold;
color: #000;
}
/* 文字列の色 */
#main #core .enlighter-t-eclipse .enlighter-s0 {
font-weight: bold;
color: #c20a0a;
}
/* HTMLのタグの色 */
#main #core .enlighter-t-eclipse .enlighter-x1 {
font-weight: bold;
color: #800080;
}
/* HTMLのプロパティの色 */
#main #core .enlighter-t-eclipse .enlighter-x2 {
font-weight: bold;
color: #060886;
}
/* CSSのセレクタの色 */
#main #core .enlighter-t-eclipse .enlighter-x10 {
font-weight: bold;
color: #866206;
}
/* CSSのセレクタの色 */
#main #core .enlighter-t-eclipse .enlighter-x11 {
font-weight: bold;
color: #866206;
}
/* CSSのプロパティの色 */
#main #core .enlighter-t-eclipse .enlighter-x12 {
font-weight: bold;
color: #060886;
}
/* CSSのプロパティ値の色 */
#main #core .enlighter-t-eclipse .enlighter-x13 {
font-weight: bold;
color: #000;
}
/* CSSのRGB値の色 */
#main #core .enlighter-t-eclipse .enlighter-x14 {
font-weight: bold;
color: #000;
}
/* CSSの擬似クラスの色 */
#main #core .enlighter-t-eclipse .enlighter-x15 {
font-weight: bold;
color: #b80074;
}
/* CSSのHTMLタグの色 */
#main #core .enlighter-t-eclipse .enlighter-x16 {
font-weight: bold;
color: #800080;
}
以上、「Enlighter - Customizable Syntax Highlighterのカスタマイズができなかったので自力でCSS書いた件」でした。
この記事を書いた人
その日暮らし
こんにちは、その日暮らしです/地方国立大理系院卒→大手大企業就職→ソフト開発二十年超→メンタル壊して退職→ちょっと回復→資格取得頑張る(簿記3級と応用情報は合格でデスペはギブアップ)→コロナ禍で再就職無理→離婚orz→実家へ出戻ってこどおじ化(笑)→WordPressの勉強のためブログに挑戦/そんな訳でブログは始めたばかりですが日々いろんなことを試して得た知識を投稿していこうと思ってます/以上