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

前回、ソースコードをきれいにサイトに表示させるための
Crayon Syntax Highlighter というプラグインの
解説と使い方についておはなしさせていただきました。

こちらのプラグインはしばらく更新されていませんので
私の使用している ＷＰのバージョンはテストされておらず
そのせいかどうかはわかりませんが
行番号と表示したいコードがズレてしまいました。

これは　テキストの内側 padding が設定されていることによって
スペースが設けられていますので こちらの設定を変更してあげることで
改善することが出来ます。

また、全体的に番号と文字のサイズが合わないケースもありますので
一緒にコードを表示しておきます。

コードはこちら

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

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

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

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

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


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

コードを記述しましたら 左上の 保存 をクリックします。
警告でこのページを離れますか？ と聞かれますが YES で大丈夫です。

これで　修正されたと思いますので 画面を確認してみてください。