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

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

フォントを確認

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

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

フォントを変更

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

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

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