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コードを追加する
このコードで正常に表示されるはずなので試してみてください!
1 2 3 4 5 6 7 8 9 10 11 |
/*Crayonの改行調整*/ .crayon-syntax
.crayon-pre,
.crayon-syntax
pre{ white-space:normal; } /*urvanovの改行調整*/ .urvanov-syntax-highlighter-syntax
.crayon-pre,
.urvanov-syntax-highlighter-syntax
pre{ white-space:normal; } |