Crayon-Syntax-Highlighter の間違った改行を修正するCSSコード｜ルクセリタス

カスタマイズコードなどをWebサイトに表示するエディタ画面のようなもので
コードもコピペしやすいし 分かりやすく表示させることができるのが “Syntax-Highlighter"です。

Syntax-Highlighterのプラグインにもいろいろ種類がありますが 中でも
Crayon-Syntax-Highlighter と Urvanov-Syntax-Highlighter が使いやすいので愛用しています。

ワードプレスのプラグインで かんたんに利用することができるのですが
バージョンアップした ルクセリタスでは Syntax-Highlighterのコードがうまく表示されないようです。

今回、 改善方法を含めて Syntax-Highlighterについて紹介していきます。

Syntax-Highlighte を知らない方はまずこちらからどうぞ。
CSSコードをサイト画面で分かりやすく表示できるプラグイン｜Crayon-Syntax-Highlighter
Crayon-Syntax-Highlighterの設定のしかた｜ルクセリタス
Urvanov-Syntax-Highlighter デザイン別 テーマの紹介！｜ワードプレス プラグイン

Syntax-Highlighter

こちらが ( Crayon / Urvanov ) Syntax-Highlighter のテーマイメージです。

Crayon-Syntax-Highlighter は利用はできますが すでに更新が止まっており
Urvanov-Syntax-Highlighter へと 移行されたような形です。

ルクセリタスで正しく表示できない！

今回、バージョンアップされたルクセリタスでは コードが正しく表示されていないことが分かりました。

１行で表示されるはずのコードが勝手に改行されてしまっていました！！

確認できているのは luxeritas-3.20.0.1 以降で
原因は スペースを空けた表示のコードが 改行と認識されてしまうコードが指定されているようです。

また ルクセリタスの方でも今後 修正してくれるかもしれませんが
とりあえずコードを追加することで改善されます。

CSSコードを追加する

このコードで正常に表示されるはずなので試してみてください！