コンテンツにスキップ
KiNa Docs

Starlight マークダウンサンプル

このページでは、Starlightで使用できるすべてのマークダウン記法とコンポーネントを紹介します。

インラインスタイル

Section titled “インラインスタイル”

太字テキスト、斜体テキスト、太字かつ斜体、取り消し線、インラインコードを使用できます。

内部リンクや外部リンクも記述可能です。

見出しレベル

Section titled “見出しレベル”

h3 見出し

Section titled “h3 見出し”

h4 見出し

Section titled “h4 見出し”
h5 見出し
Section titled “h5 見出し”
h6 見出し
Section titled “h6 見出し”

リスト

Section titled “リスト”

順序なしリスト

Section titled “順序なしリスト”
  • 項目A
  • 項目B
    • ネストした項目B-1
    • ネストした項目B-2
  • 項目C

順序ありリスト

Section titled “順序ありリスト”
  1. 最初のステップ
  2. 次のステップ
    1. サブステップ2-1
    2. サブステップ2-2
  3. 最後のステップ

タスクリスト

Section titled “タスクリスト”
  • 完了したタスク
  • 未完了のタスク
  • もう一つの未完了タスク

テーブル

Section titled “テーブル”
機能MarkdownMDX
太字oo
コンポーネントxo
Aside記法oo

引用

Section titled “引用”

これは引用ブロックです。 複数行にまたがることもできます。

ネストした引用も可能です。

コードブロック

Section titled “コードブロック”

テキストを囲み線付きのブロックで表示できます。手順やメモの記載に便利です。

基本

Section titled “基本”
お問い合わせ先: support@example.com
営業時間: 平日 9:00〜18:00

タイトル付き

Section titled “タイトル付き”
連絡先一覧
総務部: 03-1234-5678
営業部: 03-1234-5679
開発部: 03-1234-5680

行ハイライト（特定の行を強調）

Section titled “行ハイライト（特定の行を強調）”
月次レポート提出期限
  → 毎月5日まで（必着）
  → 提出先: 管理部

テキストハイライト（特定の文字を強調）

Section titled “テキストハイライト（特定の文字を強調）”
名前: 必須
メールアドレス: 必須
電話番号: 任意

変更前後の比較

Section titled “変更前後の比較”
旧手順: メールで申請書を提出
新手順: 社内システムから申請

ターミナル風の表示

Section titled “ターミナル風の表示”
ターミナル
bun install
bun dev

フレームなし

Section titled “フレームなし”
枠線なしで表示するテキストブロック

Aside（注釈ブロック）

Section titled “Aside（注釈ブロック）”

折りたたみ（Details）

Section titled “折りたたみ（Details）”
クリックして展開

折りたたまれた内容です。マークダウン記法も使用できます。

  • リスト項目1
  • リスト項目2

脚注

Section titled “脚注”

Starlightは脚注をサポートしています1。複数の脚注も使えます2。

MDX コンポーネント

Section titled “MDX コンポーネント”

Badge

Section titled “Badge”

デフォルト: Default Success: Success Note: Note Caution: Caution Danger: Danger Tip: Tip

カスタムサイズ: Large

Icon

Section titled “Icon”

open-book setting rocket pencil

LinkButton

Section titled “LinkButton”
Primary Secondary Minimal

Card / CardGrid

Section titled “Card / CardGrid”

カード1

カードの内容です。マークダウンも使えます。

カード2

2つ目のカードの内容です。

LinkCard

Section titled “LinkCard”
Starlight公式 Starlightの公式ドキュメント
Astro公式 Astroの公式サイト

Tabs

Section titled “Tabs”
const msg: string = "TypeScript";

Steps

Section titled “Steps”

  1. プロジェクトを作成する

    Terminal window
    bun create astro@latest

  2. Starlightを追加する

    Terminal window
    bun add @astrojs/starlight

  3. 開発サーバーを起動する

    Terminal window
    bun dev

FileTree

Section titled “FileTree”
  • ディレクトリsrc/
    • ディレクトリcontent/
      • ディレクトリdocs/
        • index.mdx
        • ディレクトリmeetings/
          • …
        • ディレクトリnotes/
          • starlight-sample.mdx ← このファイル
    • ディレクトリassets/
      • logo.png
    • ディレクトリstyles/
      • custom.css
  • astro.config.mjs
  • package.json

Aside コンポーネント

Section titled “Aside コンポーネント”

Footnotes

Section titled “Footnotes”

  1. これは最初の脚注です。 ↩

  2. これは2番目の脚注です。 ↩