バッジ

Prosefly の MDX コンポーネントエディターでインラインバッジを編集し、Starlight または Prosefly の構文を保てます。

対応プロファイル

同じエディターで Astro、Starlight、Fumadocs、Prosefly の各プロファイルを使えます。サイトに合うプロファイルを選ぶと、その連携で利用できる構文と編集コントロールを確認できます。

ビジュアルモードで編集する

バッジを選択すると、インラインの操作が開きます。ラベルと、そのプロファイルで設定できる表示属性を変更できます。削除操作では、周囲の段落を残してバッジだけを取り除けます。

badge.mdx

StarlightProsefly

ビジュアルソース

サンプルをリセット

エディターを読み込み中…

編集できるサンプルです。変更はこのページ内にのみ保持されます。

ソースの例

import { Badge } from '@astrojs/starlight/components';

## 公開ステータス

チームが確認している間、このガイドは <Badge text="プレビュー" variant="tip" /> です。

プロファイルによる違い

Prosefly は子要素のテキストをラベルに使い、対応する variant と color を指定できます。Starlight は text 属性にラベルを保存し、独自の variant と size の値を使います。

import { Badge } from '@astrojs/starlight/components';

リリース状況：<Badge text="プレビュー" variant="note" />。

Fumadocs プロファイルに専用の Badge 機能はありません。ラベルや色の編集は文書の内容を変えるもので、アプリの状態は変更しません。独自のバッジはソースで編集できます。

関連する MDX ガイド

次に読む: アイコン · リンクボタン · コールアウト.