コンポーネントをカスタマイズする

notro-tail には2種類のカスタマイズ方法があります。スタイルだけ変えたいなら classMap、コンポーネントごと差し替えたいなら components prop を使います。

classMap でクラスを追加する

classMap はデフォルトコンポーネントを置き換えずに Tailwind クラスを注入できます。

<NotionMarkdownRenderer
  markdown={markdown}
  classMap={{
    callout: 'border-l-4 border-blue-400',
    h2: 'text-2xl font-bold mt-8 mb-4',
    code: 'text-sm',
  }}
/>

利用可能なキーは ClassMapKeys 型として定義されています（notro パッケージの型定義を参照）。

components で差し替える

コンポーネントごと完全に置き換えたい場合は components prop を使います。

---
import { NotionMarkdownRenderer } from 'notro';
import MyCallout from '../components/MyCallout.astro';

---

<NotionMarkdownRenderer
  markdown={markdown}
  components={{ callout: MyCallout }}
/>

カスタムコンポーネントは元の Astro コンポーネントと同じ props を受け取ります。

---
// MyCallout.astro
interface Props {
  icon?: string;
  color?: string;
  class?: string;
}
const { icon, color, class: className } = Astro.props;

---

<div class:list={['my-callout', className]}>
  {icon && <span>{icon}</span>}
  <div><slot /></div>
</div>

bodyClass でページ別テーマを適用する

特定のページだけ見た目を変えたい場合は、Layout コンポーネントの bodyClass prop を使います。 global.css にスコープ付きスタイルを追加します。

.page-about .nt-markdown-content h2 {
  @apply border-l-4 pl-3 border-blue-400;
}

Notion 固定ページの場合は config.ts の navPages で bodyClass を指定します。