# Markdown スタイルショーケース このページでは、GEO Wiki Pro がサポートするすべての Markdown 構文とそのレンダリング効果を紹介します。各構文には参照用のソースコードが付いています。 --- ## GEO Wiki Pro インターフェースプレビュー 以下は GEO Wiki Pro の実際のインターフェーススクリーンショットです：  **インターフェースの特徴：** - ダークモード対応のモダンな UI デザイン - 左サイドバーのカテゴリナビゲーションで素早く切り替え - グローバル検索で即時リトリーバル - 中国語 / 英語 / 日本語の 3 言語切り替え - AI フレンドリー、ワンクリックで llms.txt をコピー --- ## 1. コールアウト ::: note **青いコールアウト** — 読者がコンテキストを理解するための補足情報。 ::: ::: tip **緑のコールアウト** — 役立つヒントとベストプラクティス。 ::: ::: warning **黄色いコールアウト** — 重要な注意事項。よくお読みください。 ::: ::: danger **赤いコールアウト** — 重要な安全情報。無視すると深刻な結果につながる可能性があります。 ::: --- ## 2. コードブロック ### 基本コードブロック ```bash # GEO Wiki CLI をインストール npm install -g geowiki-cli # ログイン geo login --url https://geowiki.pro --token geo_xxxxx # ドキュメント一覧 geo doc list --lang jp --json ``` ```javascript // Vue 3 Composition API import { ref, computed } from "vue"; const count = ref(0); const doubled = computed(() => count.value * 2); ``` ```python # Python の例 import requests response = requests.get("https://geowiki.pro/api/v1/docs") docs = response.json()["data"] for doc in docs: print(f"{doc['slug']}: {doc['title']}") ``` ### タブ付きコードブロック ```bash // [Bash] # 1 つのコマンドでドキュメントを作成 geo doc create --title "Hello" --content "# Hello World" --slug hello --lang jp ``` ```python // [Python] import requests requests.post("https://geowiki.pro/api/v1/admin/docs", json={ "title": "Hello", "slug": "hello", "content": "# Hello World" }) ``` ```javascript // [JavaScript] fetch("/api/v1/admin/docs", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ title: "Hello", slug: "hello" }) }); ``` --- ## 3. テーブル ### 基本テーブル | 機能 | 説明 | ステータス | |------|------|------| | ドキュメント管理 | CRUD + バッチ操作 | ✅ 完了 | | 多言語 | 中/英/日 3 言語 | ✅ 完了 | | AI 最適化 | GEO + SEO | ✅ 完了 | | ダークモード | サイト全体対応 | ✅ 完了 | ### 配置 | 左揃え | 中央 | 右揃え | |:-------|:----:|-------:| | テキスト | テキスト | テキスト | | 長いコンテンツ | 中央揃え | 100 | --- ## 4. Mermaid 図表 ### フローチャート ```mermaid graph TD A[ユーザー訪問] --> B{ログイン済み?} B -->|はい| C[ドキュメント表示] B -->|いいえ| D[ログインへリダイレクト] D --> E[認証情報を入力] E --> F{認証成功?} F -->|はい| C F -->|いいえ| G[エラー表示] G --> E ``` ### シーケンス図 ```mermaid sequenceDiagram participant U as ユーザー participant F as フロントエンド participant A as API participant D as ファイルシステム U->>F: 「保存」をクリック F->>A: POST /api/v1/admin/docs A->>D: .md ファイルを書き込み D-->>A: 書き込み成功 A-->>F: { success: true } F-->>U: 「保存成功」を表示 ``` ### ガントチャート ```mermaid gantt title GEO Wiki v1.0.4 開発計画 dateFormat YYYY-MM-DD section バックエンド ページネーション修正 :done, 2026-06-20, 1d 非同期 fs :done, 2026-06-21, 1d キャッシュ最適化 :done, 2026-06-22, 1d section フロントエンド ダークモード :done, 2026-06-20, 2d アクセシビリティ :done, 2026-06-21, 1d パフォーマンス :done, 2026-06-22, 1d section リリース npm パッケージ :done, 2026-06-22, 1d ドキュメント更新 :done, 2026-06-22, 1d ``` --- ## 5. ECharts チャート ### 棒グラフ ```echarts { "title": { "text": "月間ドキュメント増加数", "left": "center" }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["1月", "2月", "3月", "4月", "5月", "6月"] }, "yAxis": { "type": "value", "name": "ドキュメント数" }, "series": [ { "name": "新規ドキュメント", "type": "bar", "data": [5, 8, 12, 15, 20, 30], "itemStyle": { "color": "#2563EB" } } ] } ``` ### 折れ線グラフ ```echarts { "title": { "text": "アクセス数トレンド", "left": "center" }, "tooltip": { "trigger": "axis" }, "xAxis": { "type": "category", "data": ["月", "火", "水", "木", "金", "土", "日"] }, "yAxis": { "type": "value", "name": "PV" }, "series": [ { "name": "ページビュー", "type": "line", "data": [120, 200, 150, 80, 70, 110, 130], "smooth": true, "areaStyle": { "opacity": 0.3 } } ] } ``` ### 円グラフ ```echarts { "title": { "text": "トラフィックソース分布", "left": "center" }, "tooltip": { "trigger": "item" }, "legend": { "orient": "vertical", "left": "left" }, "series": [{ "name": "ソース", "type": "pie", "radius": "50%", "data": [ { "value": 335, "name": "直接アクセス" }, { "value": 310, "name": "検索エンジン" }, { "value": 234, "name": "AI エンジン" }, { "value": 148, "name": "ソーシャルメディア" } ], "emphasis": { "itemStyle": { "shadowBlur": 10, "shadowOffsetX": 0, "shadowColor": "rgba(0, 0, 0, 0.5)" } } }] } ``` --- ## 6. グリッドレイアウト ### 2 列グリッド :::grid{cols=2} **左列** - 機能 1：ドキュメント管理 - 機能 2：多言語サポート - 機能 3：AI 最適化 **右列** - 機能 4：SEO 最適化 - 機能 5：ダークモード - 機能 6：アクセシビリティ ::: ### 3 列カードグリッド :::grid{cols=3 style=card} **クイックデプロイ** Docker、宝塔パネル、NAS など、さまざまなデプロイ方法をサポート。5 分で公開完了。 **AI フレンドリー** llms.txt と Schema 構造化データを自動最適化し、AI エンジンが積極的にコンテンツを引用します。 **多言語** 中国語、英語、日本語の 3 言語を標準サポート。1 つのシステムでグローバル顧客に対応。 ::: --- ## 7. 数式 インライン数式：質量エネルギー等価性 $E=mc^2$、オイラーの公式 $e^{i\pi}+1=0$。 ブロック数式： $$ \frac{n!}{k!(n-k)!} = \binom{n}{k} $$ $$ \int_{0}^{\infty} e^{-x^2} dx = \frac{\sqrt{\pi}}{2} $$ --- ## 8. 脚注 GEO Wiki Pro は AI 最適化されたナレッジベースシステム[^1]です。企業向けに構築されています[^2]。 [^1]: ChatGPT、Gemini、Perplexity などの主要 AI エンジンをサポート。 [^2]: プライベートデプロイ、カスタム開発、技術トレーニングなどの企業サービスを提供。 --- ## 9. FAQ ブロック ::: faq **Q: GEO Wiki Pro は無料ですか？** A: GEO Wiki Pro は有料製品で、さまざまなライセンスプランがあります。詳細は [email protected] までお問い合わせください。 **Q: どのようなデプロイ方法がサポートされていますか？** A: Docker、宝塔パネル、NAS、クラウドサーバーなど、さまざまなデプロイ方法をサポートしています。詳細は[デプロイメントガイド](/docs/docker-deployment)をご覧ください。 **Q: AI エンジンにコンテンツを引用してもらうにはどうすればいいですか？** A: GEO Wiki Pro には GEO 最適化が組み込まれており、llms.txt と Schema 構造化データを自動生成します。通常通りコンテンツを公開するだけで、システムが自動的に最適化します。 **Q: 何言語がサポートされていますか？** A: 現在、中国語、英語、日本語の 3 言語をサポートしています。今後、さらに多くの言語が追加される予定です。 ::: --- ## 10. 3D モデル :::model[モーターモデルサンプル](/media/sample.step) --- ## 11. ファイルダウンロード [ユーザーマニュアル PDF](/media/user-manual.pdf) --- ## 12. 画像  --- ## 13. テキスト書式 - **太字テキスト** - *斜体テキスト* - ~~取り消し線テキスト== - ==ハイライトテキスト== - `インラインコード` - [リンクテキスト](/docs/markdown-guide) --- ## 14. リスト ### 順序なしリスト - 項目 1 - 項目 2 - サブ項目 A - サブ項目 B - 項目 3 ### 順序付きリスト 1. ステップ 1：CLI をインストール 2. ステップ 2：サーバーにログイン 3. ステップ 3：ドキュメントを作成 ### タスクリスト - [x] GEO Wiki Pro をインストール - [x] カテゴリとタグを設定 - [ ] 最初のドキュメントを作成 - [ ] 公開して共有 --- ## 15. 引用 > 「GEO Wiki Pro により、散在していたナレッジ資産を統合管理できるようになりました。顧客はよくある質問をセルフサービスで確認でき、サポートチームの負担が大幅に軽減されました。」 > > — 運営責任者、ShopManager --- ## 関連ドキュメント - [Markdown ライティングガイド](/docs/markdown-guide) — 完全な構文リファレンス - [CLI コマンドリファレンス](/docs/cli-reference) — コマンドライン操作ガイド - [GEO Wiki Pro ユーザーマニュアル](/docs/geo-wiki-pro-user-manual) — 完全なユーザーマニュアル