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

WordPressプラグイン Crayon Syntax Highlighter のテーマによって表示がズレてしまう、という件についてまとめました。

テーマによって「行」がズレてしまう

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

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

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

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

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

コードはこちら

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

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

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

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

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


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

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

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

そのほかの Syntax Highlighter

このプラグインが更新が止まっているということで ほかの Syntax Highlighter の
プラグインを探してみましたが残念ながら おすすめのものは見つかりませんでした。

更新は止まっていますが サポートしてくれているサイトもありますし
今のところ、問題なく使用できていますので しばらくはこのまま行こうと思います。

また、良いプラグインを見つけましたらご案内させて頂きます。

サポートサイトはこちら
GitHub – Crunchify/crayon-syntax-highlighter