【Luxeritas】シンタックスハイライターが機能しない時のメモ
この記事では、ブログを作成できるサービス「WordPress」の無料テーマ「Luxeritas（ルクセリタス）」で、シンタックスハイライターブロックを挿入しても、コードがうまくハイライトされない点について書きます。
ただの自分用のメモです。
僕は「WordPress」で「Luxeritas（ルクセリタス）」テーマを利用しています。
本テーマには、色々なブロックが用意されており、その中の一つに、シンタックスハイライターがあります。CSSやHTMLなどのコードを、いい感じの装飾で表示してくれるブロックです。以下のような感じです。実際に挿入しています。
<!--テスト-->
pre[class*="syntaxhighlighter"] {
border-radius: 10px !important;
}他のブロック同様、ブロックエディターの編集画面で、ブロック追加→「シンタックスハイライター」を選ぶと挿入できます。ただ挿入するだけでなく、言語を選択できます。上記は「CSS」言語を選択しているので、CSS用の装飾になっています。
標準で搭載されているので、外部プラグインのインストールが不要な点、豊富な言語に対応している点など、非常に便利で重宝しています。
しかし、とある条件がそろった時、うまくコードがハイライトされない時があります。本記事ではメモ代わりに書きたいと思います。
愚痴とか、根本的な解決策の提示とか、そういうのではありません。自分用のメモ兼、あわよくば本記事を見てくださった専門家さんが、いい感じの対処法を教えてくれないかなあという魂胆です。
同一記事内に複数言語を挿入しちゃうと機能しなくなる！
僕の環境だけかもしれませんが、僕の場合、同じ記事内にCSS言語を選択したシンタックスハイライター、HTML言語を選択したシンタックスハイライター…といった感じで、複数のシンタックスハイライターブロックを挿入すると、100%の確率で機能しなくなりました。
具体的に言うと、複数言語を設定した時、プレビューで確認してみても、コードが赤や緑にハイライト表示されなくなります。ブロック自体は挿入されているんですが、装飾がされていない状態です。背景色は設定されています。行番号は表示されなくなります。
実際にそうなっている記事を貼っておきます。HTMLとCSSの2つ以上の言語を設定しているため、全てのシンタックスハイライターが装飾されなくなっています。
https://www.naporitansushi.com/google-maps-reviews-ratings-h...問題が発生するのは、2つ以上の言語を使っている記事のみです。それ以外のCSS言語のシンタックスハイライターしか挿入していない記事や、そもそもシンタックスハイライターブロックを挿入していない記事には影響しません。
ただし、複数言語を使った時点で、その記事の全てのシンタックスハイライターが機能しなくなるので、厄介っちゃ厄介です。
対処法は分からない。複数使わないことかな
解決方法は分かりません。シンタックスハイライターを2つ以上挿入して、片方をA言語、もう片方をB言語にすると、確実に発生します。
同じように「Luxeritas」テーマを使っている方、どうなんですかね…？もしよろしければ、問い合わせでもTwitterでも何でもいいので教えていただければなと思います。もしかしたら、「Luxeritas」でも僕の環境だけとか…？だとしたら、何が原因なんですかねぇ…。
シンタックスハイライターを2つ以上挿入しても、全て同じ言語（例：CSSなど）にした場合は、問題が発生しません。
片方をCSS、もう片方を「言語を選択してください」＝デフォルトの未設定状態にすると、CSSのほうは正常に装飾されます。もう片方は、言語を選択していない状態なので、どんなコードを書いても装飾されません。
記事執筆時点で、複数言語のシンタックスハイライターを挿入した上で、問題を回避する方法を知りません。唯一の回避方法は、複数言語のシンタックスハイライターを挿入しない点です。
複数挿入するとしても、片方を「言語を選択してください」にするか、同一の言語にします。
2021年12月に開発者様に問い合わせはしている
実をいうと、2021年12月に「Luxeritas」テーマ開発者様の公式ブログにて、質問させていただきました。以下、僕の質問です。
初めまして、こんにちは。
いつもLuxeritas利用させていただいています。質問です。
Luxeritas のブロックエディターのシンタックスハイライターについてなのですが、言語を選択しても、その言語通りに色？マーカー？ハイライト？がつかない時があります。
最初は10回に1回程度の頻度だったのですが、最近は新規に挿入したシンタックスハイライターブロックのほとんどがハイライトされないようになりました。
開発者ツールで確認してみると、うまくハイライト表示されている記事は、以下のようになっています。
<span class="token comment">〇〇〇～～
一方でうまく表示されていない記事は、以下のようになっています。
〇〇〇～～
当方、初心者なので、これが何を指しているのかは全く分かりません。ググってみてもそれらしき答えがでてきませんでした。
言語を設定すると、シンタックスハイライターのホバー時に右上に設定した言語が表示されます。ここの表示は、ちゃんと設定した言語になっていますが、中身は、全部白文字で表示され、赤や緑色の文字になりません。
お忙しいと思いますが、もしよろしければ一体何が原因なのか教えてくださればなと思います。こちらの環境のせいでこのような現象になっている場合、大変すみません。無視で結構です。
【初心者なりに試してみたこと】
・別のブラウザでアクセスして見た目に変化があるか確認。
・全てのプラグインの一時停止
・うまく成功しているシンタックスハイライターブロックをコピペして他記事でも使ってみる。→うまくいってるブロックをコピペしてもペーストしたブロックはハイライト表示されない状態になりました。
・うまく成功しているシンタックスハイライターブロhttps://www.naporitansushi.com/feed43-rss/ックを再利用ブロックに追加してパターン登録に追加
・コードをコピペしているのがいけないかもと思って、手書きで入力うまくハイライト表示されている記事↓
https://www.naporitansushi.com/tweetdeck-horizontal-scroll/うまくハイライトされない記事↓
Luxeritas 3.21.2.1 リリース | Luxeritas Theme
https://www.naporitansushi.com/feed43-rss/
https://www.naporitansushi.com/autohotkey-mouse/
勘違いで、「最初はうまく表示されていたけど、最近はできなくなった」と書いています。恥ずかしいです。本当は複数言語を設定したのが原因でした。
上記の質問に対し、本当にありがたいことに開発者様から返信をいただけました。
ナポリタン寿司さん。
同じページ内に複数の言語があるので、Prism.js の読み込み順が影響してるってのは分かったんですが、まだ、全パターンは調べてないので、臨時対処的になりますけど、
luxeritas/inc/wpfunc.php にある
2165行目の’highlight_batch’ => 'Batch’,
↑これを
2159行目にある’highlight_markup’ => 'HTML / XHTML’,
の上に持ってきてみてもらえますか。
Luxeritas 3.21.2.1 リリース | Luxeritas Theme
開発者様ってほんとすごいですよね。尊敬でしかないです。ズバッと一時的な回避策を教えていただきました。どうやらシンタックスハイライターを制御している「Prism.js」の読み込み順が影響しているようです。
一時的な対処法として、「luxeritas/inc/wpfunc.php」の一部コードの順番を変える案を提案していただきました。僕は以下のように返信しました。
迅速な返信ありがとうございます！！
早速、試してみました。
無事に、ハイライト表示されるようになりました！すごすぎます…。
そもそも、同じページ内で複数言語使わないほうがよいのですね。何時間も色々調べたり試行錯誤していたので、めちゃくちゃ嬉しいです。今後は、そもそも同一ページに複数言語を使わないということに気を付けていきたいと思います。
確かに、同一言語だけのページでは正常に表示されていました。自分では絶対に気づかなかったであろう原因なので、本当に助かりました。
自分が何かしたせいでこのような現象になっているのだとしたら、作者様に迷惑なだけなので質問しようかずっと迷ってたのですが、勇気振り絞ってコメントして本当に良かったです。
結局、複数言語を使っていた自分が原因だったわけですが、優しくご指摘してくださり、さらには解決策まで提示してくださり、本当にありがとうございます。
これからも、応援しています。
Luxeritas 3.21.2.1 リリース | Luxeritas Theme
2021年12月に質問した時は、教えてもらった方法を実行することで、一時的に治ったように見えました。しかし、アップデートによる影響なのか、どんどん当サイトが複雑になっていった影響なのか、いつの間にか効かなくなっていました。
教えていただいた部分は、「Batch」の文字列があり、もしかしたら、「Batch」言語ともう一つの言語が競合している場合に使える技だったのかもしれません。
僕の場合、CSSやHTML、HTMLやBatch、CSSやBatch…といった感じで、色々な組み合わせを使うため、全てに対応していないのかもしれません。
「そもそも、同じページ内で複数言語使わないほうがよいのですね。」と僕がやりとりしているように、そもそも同一記事内に複数言語を使うのは、想定されていないのかもしれませんね～。でも、使いたいんですよねぇ…。
感想
以上、「WordPress」の無料テーマ「Luxeritas（ルクセリタス）」で、複数言語でシンタックスハイライターのブロックを挿入した時、その記事内でコードの装飾がうまくされない件についてでした。
どうしたものやらって感じですねぇ…。ブログを始めた時、適当に選んだ無料テーマが「Luxeritas」で、今でもずっと使っています。
「不満があるならテーマを移行しろよ」って話なんですが、最初から本テーマなので、もう提供され続ける以上、ずっと使いたいなぁって思っています。
他テーマを利用したことがないので、「他テーマと比べてここがいい！」みたいなのが一切分かりません。しかし、恐らく設定項目も豊富で、上位表示（SEO）も問題なくできているので、不満点がありません。こんな素晴らしいものを提供してくださっている開発者様には頭があがりません。
なんならフッターの「WordPress Luxeritas Theme is provided by “Thought is free".」を消す有料プラグインを買おうか迷っているくらいです。