Makonote

AstroのMarkdown記事でコードブロックの見た目を整える

AstroでMarkdown記事を表示すると、本文の見た目はCSS次第です。

特に技術記事では、コードブロック、インラインコード、テーブルが読みづらいとかなりつらくなります。

最初に .prose のような本文用クラスを作っておくと扱いやすいです。

インラインコード

.prose code {
  padding: 0.08em 0.28em;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: #f7f9fb;
  font-size: 0.92em;
}

本文中の CMakeLists.txt や std::move が見分けやすくなります。

コードブロック

.prose pre {
  overflow-x: auto;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f7f9fb;
  line-height: 1.55;
}

.prose pre code {
  padding: 0;
  border: 0;
  background: transparent;
  font-size: 0.95rem;
}

pre code 側では、インラインコード用の背景やborderを消します。

これを忘れると、コードブロック内のcodeにも二重で装飾が入ることがあります。

テーブル

.prose table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 0.98rem;
}

.prose th,
.prose td {
  padding: 10px 12px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}

設定一覧や比較表を書くなら、テーブルの見た目も先に整えておきます。

Markdown本文を囲む

記事詳細ページでは、Markdown本文を .prose で囲みます。

<article class="prose">
  <h1>{post.data.title}</h1>
  <Content />
</article>

AstroでMarkdownを描画する流れは AstroでMarkdown記事の詳細ページをgetStaticPathsで生成する に分けています。

まとめ

Markdown記事の見た目は、最初に本文用CSSを用意しておくと楽です。

  • .prose code でインラインコード
  • .prose pre でコードブロック
  • .prose pre code で二重装飾を避ける
  • .prose table で比較表を読みやすくする

技術記事では本文そのものがUIなので、カードやナビより先にコードブロックを整える価値があります。

関連記事