<>

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 へと 移行されたような形です。

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

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

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

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

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

CSSコードを追加する

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