WordPress

WordPress prismjsの行番号のずれを直す方法

prismjsで行番号がずれてしまう

WordPressにprismjsを導入してみたところ、
行数が長くなるにつれて、行番号とコードの位置がずれる現象が発生しました。
導入している環境によって原因は異なるかもしれませんが、
私の環境では「フォント」が原因でした。

行番号のずれを直す

まずは現象の確認

数行程度であればわからなかったのですが
行数が多いと、行番号とコードの位置がずれてしまいます。

フォントの変更

私は、WordPressの有料テーマの「AFINGER5」を使用しているので、
テーマの設定からフォントを変更しました。

WordPressを使用されている方は、それぞれのテーマから
フォントが変更できればそちらから
そうでない方は、CSSで優先するフォントを変更してあげれば対応できると思います。
※フォント変更による他ページのデザイン崩れには気を付けてください。

CSSでの変更方法


// セレクタに関しては環境に合わせて指定してください。
body { 
  // 一例ですので、フォントは任意のものを指定してください。
  font-family: "Yu Gothic,MS ゴシック,sans-serif"; 
}


WordPress 「AFINGER5」の変更方法

以下からずれが発生しないフォントを選択してあげてください。
※その他でフォントの指定もできます。

AFINGER5 管理 > デザイン > フォントの種類

行番号のずれが直った!

CSSなど色々と調べてみましたが、フォントを変更することであっさりと直りました。
ただ、windows、mac、ios、androidなど各OSで確認ができたわけではないので
閲覧するデバイスによっては、ずれが生じるかもしれませんので注意してください。

ちなみに、選択できるすべてのフォントを試したところ、以下のような結果がでました。
参考にしてください。

フォント 正常な表示
デフォルト
×
M PLUS Rounded 1c
×
Noto Sans
×
游ゴシック
游明朝
旧テーマ版

テーマ依存?AFINGER5で先頭行に余計なスペース

最後に、一つだけCSSをいじったところがあったので
記載しておきます。(困ってる人いなさそうですが・・・)
比較したらわかりますが、先頭行だけスペースが存在しています。

修正前

修正後

CSSを確認したところ、 以下の指定によって左右のパディングが4pxずつ指定されていることが原因でした。

.st-code, code {
  padding: 2px 4px;
}

以下の指定を加えることで解消されました。
外観 > カスタマイズ > 追加CSS


code {
  padding: 2px 0 2px 0;
}


みるはぴ

思ったようにいくのが一番ですが、
不具合など解消できた時のすっきり具合は好きです。
(ただし、簡単なものに限る)

  • この記事を書いた人
  • 最新記事

-WordPress

© 2022 みるはぴ.com