Prose

Markdown や MDX が描いた本文に、組版を戻す入れ物

インポート

ts
import { Prose } from '@k8ordo/ui';

使い方

ベースのスタイルは見出し・リスト・余白・強調をリセットする。Prose の中だけ本文の組版を戻す。行間は広め（leading-loose）、見出しは詰め組み（palt）、日本語の em は傍点にする。

はじめに

本文の中の強い強調と強調、リンク、inline code が、読みやすく並ぶ。

  • リセットで消えた黒丸が戻る
  • 番号付きのリストも同じ

引用は罫線と控えめな文字色で示す。

tsx
<article>
  <Prose>
    <MDXContent />
  </Prose>
</article>

部品を置く

組版を効かせるのは、クラスの無い素の要素だけ。部品（どれもクラスを持つ）は自分の見た目のまま、前後の間だけが本文と同じに空く。MDX で要素を部品に対応づければ部品の見た目に、素のままなら本文の見た目になる。

A paragraph before the component.

情報
  • First note
  • Second note

A paragraph after it.

tsx
<Prose>
  <p>A paragraph before the component.</p>
  <Alert message={['First note', 'Second note']} tone="info" />
  <p>A paragraph after it.</p>
</Prose>

縦書き

.writing-v の中では、段落の頭を 1 字下げる（本の組み方）。

縦書き

縦書きでは、段落の頭を一字下げて組む。

二つ目の段落も、同じく一字下げる。

tsx
<div className="writing-v">
  <Prose>
    <p>…</p>
  </Prose>
</div>

Props

children?
Type: ReactNode
Default: -

型ベース（内部で固定する一部attrsは除外）: HTMLAttributes<HTMLDivElement>

Components