Markdown Workflow Hacks

カスタムコンポーネントを MDX に差し込む際は、AST を直接操作せず import + JSX で表現するとシンプルです。インラインの <Marker> やブロック要素の <ReviewBlock> はテキストノードの置き換えだけで済むため、walk() など軽量なトラバーサでも十分に扱えます。外部リンクには <Link> を使い、rel="noopener" とアイコン付与を自動化しておきましょう（例:

）。

Marker の使用例

ReviewBlock の使用例

ConversationBlock の使用例

標準テキストと引用レイアウト

MDX の本文は .post-body クラスが当たるため、通常段落でも leading-7 と space-y-6 が効いて読みやすい間隔になります。インラインコード（例: pnpm validate）や強調を入れても、周辺要素とのバランスは自動で取られます。

長文の引用は blockquote タグを使うと余白・背景色・ボーダーが追加され、段落との視覚的な差別化が容易になります。テーマのライト / ダーク双方に対応済みです。

リストと番号付き手順

• 外部サービス連携の前に API キーを .env に保存する
• <Link> コンポーネントで外部リンクを一括制御する
• 記事テンプレートに共通の frontmatter を用意する

1. pnpm lint で静的解析
2. pnpm validate で Frontmatter / スラッグを検証
3. pnpm --filter sample-site build で本番想定ビルドを確認

コードブロックとプリセット

# コマンド群は pre > code にラップされ、背景色と角丸が適用される
pnpm lint
pnpm validate
pnpm --filter sample-site build

export function buildSeoMeta(input: BuildSeoMetaInput) {
  const defaultImage = new URL('/ogp.png', input.site.url).toString();
  return {
    title: input.seo?.title ?? input.site.name,
    description: input.seo?.description ?? input.site.description,
    image: input.seo?.image ?? defaultImage,
  };
}

表形式の比較

画像とキャプション

キャプションです。