mimifuwa.cc

サンプル記事

#sample
目次

文章とインライン要素

これは 太字、イタリック、取り消し線、インラインコード を含む文章です。

リンクも確認できます：mimifuwa.cc と Cloudflare Workers。

リスト

  • 普通の箇条書き
  • 装飾付きの項目
    • ネストした項目
    • もう一つの項目
  1. 順序付きリスト
  2. 二番目の項目
  3. 三番目の項目

引用と情報カード

これは通常の引用です。

複数行の引用も確認できます。

お知らせ これは情報カードです。補足説明や更新情報を表示する用途に使えます。
成功 すべてのコンポーネントを確認できました。
注意 dev preview の記事なので、本番データには影響しません。
危険 本番環境で試す前に、必ず preview で表示を確認してください。

リンクカード

単独行の URL はリンクカードになります。

developers.cloudflare.comdevelopers.cloudflare.com

X の投稿 URL は Twitter 埋め込み用のプレースホルダーになります。

mimifuwacc@mimifuwacc

UUIDv4の衝突が話題になっているので，いいねした人にUUIDv4を配ろうと思います

画像

image02

画像の前後に文章がある場合の余白も確認します。

コードブロック

ファイル名付きのコードブロックです。

src/example.ts
type User = {
  id: string;
  name: string;
};

const greet = (user: User) => `こんにちは、${user.name}さん`;

console.log(greet({ id: "dev-001", name: "みみ" }));

ファイル名なしのコードブロックです。

pnpm exec dotenvx run -f ../../env/.env.dev -- pnpm run build
pnpm exec wrangler deploy --config dist/server/wrangler.json

JSON のシンタックスハイライトも確認できます。

config/example.json
{
  "environment": "dev",
  "features": ["markdown", "preview", "access"],
  "enabled": true
}

テーブル

コンポーネント 状態 確認ポイント
見出し ✅ ID と目次
情報カード ✅ 色とアイコン
コードブロック ✅ 言語・ファイル名・コピー
リンクカード ✅ OGP と URL
画像 ✅ サイズと余白

タスクリスト

  • Markdown を保存する
  • HTML に変換する
  • 本番公開前に最終確認する
    • dev preview で確認する
    • モバイル幅で確認する

長めの文章

表示確認では、短い要素だけでなく、段落が続いたときの行間や最大幅も重要です。これはサンプル記事のための文章ですが、実際の記事に近い長さのテキストを置いておくことで、本文の読みやすさ、見出しとの距離、リンクやコードブロックの前後関係を確認できます。画面幅を変えたときに、表が横にはみ出さず、コードが適切にスクロールできることも確認してください。

最後に、記事の終わり方を確認するための段落です。ここまで表示できていれば、admin-dev の Markdown プレビューと web-dev の記事ページで基本的なコンポーネントを一通り確認できます。