Prose

この記事は .prose が扱う HTML タグを一通り並べたものです。本文の中では strong による強い強調やem による強調、a によるリンク、mark によるハイライト、small による注記、del で消した文、ins で足した文、s で無効になった文をそのまま使えます。

略語は CSS のように書けます。化学式は H₂O、指数は E = mc²。 キー操作は Ctrl + C のように示します。prose は記事本文に付けるクラスの名前です。
br で改行した行です。

見出し

h1 から h6 まで、サイズと余白が段階的に変わります。見出しは直前のブロックから離れ、 続く本文とは近づきます。h1 はページの見出しと重なるため、このサンプルには入れていません。

h3 の見出し

h3 に続く本文です。

h4 の見出し

h4 に続く本文です。

h5 の見出し

h5 に続く本文です。

h6 の見出し

h6 に続く本文です。

リスト

• ul の項目です。
• 入れ子にするとマーカーが disc → circle → square と変わります。
  • 2 階層目の項目
    • 3 階層目の項目
• 項目の中には段落やコードも置けます。

1. ol の項目です。
2. 入れ子にすると decimal → lower-alpha → lower-roman と変わります。
   1. 2 階層目の項目
      1. 3 階層目の項目
3. 3 つ目の項目

説明リスト

トークン

配色やタイポグラフィの値に名前を付けたものです。colors.css と typography.css の @theme で定義しています。

prose

記事本文に付けるクラスの名前です。

引用

よいデザインは、できるだけ少ないデザインで成り立っている。 本質的でないものをすべて取り除けば、本質が際立つ。

— Dieter Rams

文中の短い引用は このように 書きます。

コード

インラインのコードは --text-color-default のように表示されます。 コマンドの出力は done のように示します。

pre と code を直に書いた場合は、ハイライトなしのコードブロックです。

npm install @cloudensis/design-system
npm run dev

表

図版

開閉

hr の下の段落です。区切り線の手前も、見出しと同じだけ余白を広げています。

ここは .prose のスタイルが効く段落です。

この段落も .prose のスタイルが効きます。CodeBlock は not-prose を付けているので、記事の中に置いても prose の pre のスタイルを受けません。