Crayon Syntax Highlighter – 行番号とコードがずれて表示されてしまう

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

こちらのプラグインはしばらく更新されていませんので
私の使用している WPのバージョンはテストされておらず
そのせいかどうかはわかりませんが
行番号表示したいコードズレてしまいました。
Crayon-行番号とコードのずれのイメージ画像
これは テキストの内側 padding が設定されていることによって
スペースが設けられていますので こちらの設定を変更してあげることで
改善することが出来ます。

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

コードはこちら

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

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

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

編集画面 -  子テーマの編集からのCSS追加
子テーマの編集はダッシュボードの Luxeritas から子テーマの編集を選択
Luxeritas-子テーマの編集からCSSの編集1
子テーマの編集からCSSの編集2
子テーマの編集 style.css 画面で
1 /*! Luxeritas child css */ から始まるコードが書かれています。
スクロールして頂くと注意書きがありますので こちらだけ気を付けてください。

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

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

プラグイン