WordPressに貼り付けたシェルやコードの空白がずれる問題の解決方法

カスタマイズ

こんにちは。仁科(@nishina555)です。

自分は技術的なアウトプットの場としてWordPressを活用しています。

WordPressのテンプレートはスワローを利用し、Markdownで記述できるようになるJP Markdownとシンタックスハイライトが有効になるWP Code Highlight.jsの2つのプラグインを組み合わせてソースコードを貼り付けています。

JP MarkdownとWP Code Higlight.jsの組み合わせ方については以下の記事で紹介しています。

Markdownでキレイなソースコードが書ける環境をWordPress上に作る

しかし、ISUCONのチュートリアル記事をかいているときに、空白の幅がうまくそろわないという問題が発生しました。
原因と解決方法がわかったので、情報共有をしたいと思います。

起こった問題:　空白があるソースコードを貼り付けると見た目がずれてしまう

例としてMySQLのテーブルの結果を貼り付けた場合を考えます。

Markdown記法に従いバッククオート3つで以下のように囲みます。

すると見た目は以下のようになってしまいました。

なぜかMarkdownだとうまく幅が揃っているのに、HTMLに変換されると見た目がおかしくなってしまいました。

原因:　フォントが悪さをしていた

codeタグのfont-familyを調べてみるとmonospaceというものが利用されていました。
これが原因で文字の幅やスペースが微妙に変化してうまく揃わないという現象が起きていました。

対応: font-familyを変更する

原因がわかったので、style.cssを以下のように変更しました。
font-familyはQiitaが利用しているものをそのまま流用してきました。

style.css

code {
    font-family: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
}

これで先ほどと同じようにMarkdownで記述しても見た目が崩れないようになります。

+--------------------+
| Database           |
+--------------------+
| information_schema |
| isubata            |
| mysql              |
| performance_schema |
| sys                |
+--------------------+
5 rows in set (0.00 sec)

おつかれさまでした！

この記事がよかったと思いましたらツイッター(@nishina555)のフォローもよろしくお願いします！

RECOMMEND