ターミナル出力をmarkdownで表示するときの空白ずれ

ターミナル上のコマンド出力を貼り付けて、markdownで表示するときに空白ずれが発生しました。ずれを発生させないように対処した方法を紹介します。

フォントを確認

以下のように空白ずれが発生しています。

html_css_markdown_gap_before.png

該当要素の font-family を確認したところ、 font-family: monospace; と設定されていました。

フォントを変更

以下のようにフォントを変更しました。

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

空白ずれを解消することができました。

html_css_markdown_gap_after.png
わくわくBank.
フリーランスのエンジニアとして活動してます。ここでは、ソフトウェア開発で必要とされる技術、用語、概念を整理しています。

HTML/CSSに関連する書籍 (Amazon)