Crayon Syntax Highlighter – 行番号とコードがずれて表示されてしまった時の対処法

サイト内に CSSなどのカスタマイズコードを分かりやすく表示させるためのエディタ
Crayon Syntax Highlighter のプラグインですが、かなり前から更新が止まっていて
現在、私が使用しているＷＰのバージョンでは未テストの状態。

そのせいかどうかはわかりませんが行番号と表示したいコードがズレて表示されてしまいます。

私は現在、この左の番号表示を非表示にしていますが
今回はこの表示のズレを CSSを使って修正していきます。

表示のズレをCSSカスタマイズ

このズレは Crayon Syntax Highlighter のテキストの padding の設定を修正するだけで解決することができます。
また、全体的に番号と文字のサイズが合わないケースもありますので一緒にコードを表示しておきます。

コードはこちら

/*  余白の調整 */
.crayon-syntax .crayon-pre {
   padding-top: 0px !important;
padding-bottom: 0px !important;
}
.crayon-pre .crayon-line{
   padding-top: 0px !important;
padding-bottom: 0px !important;
}
 
/* ナンバーの余白の調整 */
.crayon-theme-flatui-light .crayon-marked-num {
 border-width: 0px !important;
}

/* 余白の調整 */

.crayon-syntax .crayon-pre {

padding-top: 0px !important;

padding-bottom: 0px !important;

}

.crayon-pre .crayon-line{

padding-top: 0px !important;

padding-bottom: 0px !important;

}

/* ナンバーの余白の調整 */

.crayon-theme-flatui-light .crayon-marked-num {

border-width: 0px !important;

}

編集は外観カスタマイズ追加CSS または　子テーマの編集の style.css に記述します。

編集画面　－外観カスタマイズからの編集

ダッシュボードの外観からカスタマイズを選択
カスタマイズ一覧の一番下に追加CSS の項目がありこちらをクリックしてコードを記述します。

コードを記述しましたら公開をクリックして終了です。

編集画面　－子テーマの編集からのCSS追加
子テーマの編集はダッシュボードの Luxeritas から子テーマの編集を選択

子テーマの編集 style.css 画面で
１　/*! Luxeritas child css */ から始まるコードが書かれています。
スクロールして頂くと注意書きがありますので　こちらだけ気を付けてください。