<>

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

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

そのせいかどうかはわかりませんが 行番号表示したいコードズレて表示されてしまいます。
Crayon-行番号とコードのずれのイメージ画像

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

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

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

コードはこちら

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

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

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

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

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

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

そのほかの Syntax Highlighter

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

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

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

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