Markdown で書いた記事の見本

Markdown で書いた記事の見本です。ひととおりの要素を並べます。強調は ページから離れているもの のように使い、古い情報は 9月12日 9月17日のように打ち消します。
改行のあとの行には、目立たせたい言葉と文字のリンクを置きました。

2 つ目の段落です。文の中のコードは data-reading のように書き、キーは Cmd + K のように書きます。

リスト

• 部品の高さは、マウスでも指でも 44px です。
• 文字は、パソコンでは 16px、スマホの機能の画面では 14px にします。記事の中では、スマホでも 16px のままです。
  • 入力欄の文字は、どちらも 16px
  • ラベルとキャプションは、どちらも同じ
• data-reading を付けた要素の中が、読みものです。

9. Heading と Text を足す
10. Prose を作る
11. CodeBlock を作る

• 見出しと本文の大きさ
• 要素のあいだの余白

コード

ライブラリは pnpm で入れます。

pnpm add @kazuemon/ui
pnpm add -D shiki @shikijs/transformers # 色分けはビルド時に

設定ファイルは、次のように変えます。

import { transformerNotationDiff } from '@shikijs/transformers';

export default defineConfig({
  markdown: {
    // 色はライブラリの CSS 変数で受ける
    shikiConfig: {
      theme: 'github-light',
      theme: cssVariables,
      transformers: [transformerNotationDiff()],
      wrap: false,
    },
  },
});

引用

コンポーネントがいっぱいあるけど、マテリアルデザインほどかたい感じじゃないモダンな UI ライブラリがつくりたい。

— @kazuemon/ui の README

---

画像と表

白っぽい画像にも、細い輪郭が付きます。

部品	中の名前	高さ
ボタン	Button	44px
入力欄	TextField	44px
大きい指用	coarse-large	52px

脚注

和文と欧文を混ぜても、文字は行の中央にそろえます¹。行の高さは整数の値にします²。

小さな見出し

h4 より下の見出しは、どれも同じ大きさです。