Prose

A container that puts typesetting back into rendered Markdown or MDX.

Import

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

Usage

The base styles reset headings, lists, margins, and emphasis. Inside Prose, the typesetting of body text comes back: loose leading (leading-loose), proportional kana in headings (palt), and emphasis dots for Japanese em.

はじめに

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

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

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

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

Components Inside

Only bare elements, without a class, are typeset. A component (every one has a class) keeps its own look, and only the space around it follows the text. Map an MDX element to a component to make it look like the component, or leave it bare to make it look like text.

A paragraph before the component.

Information
  • 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>

Vertical Writing

Under .writing-v, each paragraph’s first line is indented one character, as a book is set.

縦書き

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

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

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

Props

children?
Type: ReactNode
Default: -

Type base (some attrs are managed internally): HTMLAttributes<HTMLDivElement>

Components