# Markdown 拡張構文リファレンス > GEO Wiki Pro カスタム Markdown 拡張構文の完全リファレンスマニュアル --- ## 概要 GEO Wiki Pro は、動画、3D モデル、コールアウトブロックなどの特殊コンテンツを埋め込むための拡張構文セットを標準 Markdown の上に提供します。これらの拡張は `src/plugins/` ディレクトリにあるカスタムプラグインを通じて実装されています。 すべての拾張構文は `:::` をデリミタとして使用します。 --- ## 拡張構文一覧 | 構文 | 説明 | 例 | |------|------|-----| | `:::video[説明](url)` | 動画埋め込み | `:::video[Bilibili 動画](https://bilibili.com/video/BVxxx)` | | `:::model[タイトル](url)` | 3D モデルダウンロードカード | `:::model[モーターモデル](/media/model.step)` | | `` | 画像（alt が自動的にキャプションとして表示） | `` | | `[名前](url)` | ファイルダウンロードカード（PDF/DOC など） | `[ユーザーマニュアル](/media/manual.pdf)` | | `::: note/tip/warning/danger` | コールアウトブロック | `:::note\n説明テキスト\n:::` | | `::: faq` | FAQ ブロック | `:::faq\n**Q: ...**\n...\n:::` | --- ## 動画埋め込み ### 基本構文 ```markdown :::video[動画タイトル](動画 URL) ::: ``` ### 使用例 **Bilibili 動画：** ```markdown :::video[CAN バス配線チュートリアル](https://bilibili.com/video/BV1xx411c7XW) ::: ``` **YouTube 動画：** ```markdown :::video[Arduino CAN Bus Tutorial](https://www.youtube.com/watch?v=dQw4w9WgXcQ) ::: ``` ### サポートされているプラットフォーム | プラットフォーム | サポート形式 | 説明 | |----------------|-------------|------| | Bilibili | `bilibili.com/video/BVxxx` | iframe を自動埋め込み | | YouTube | `youtube.com/watch?v=xxx` または `youtu.be/xxx` | iframe を自動埋め込み | | その他 | 標準動画 URL | 汎用埋め込みを試行 | ### レンダリング効果 埋め込まれた動画は、タイトル説明付きのレスポンシブビデオプレーヤーとして表示されます。モバイルでは自動的にサイズを調整します。 ::: note 動画 URL は完全で、公開アクセス可能なアドレスである必要があります。ログインが必要な非公開動画はサポートされていません。 ::: --- ## 3D モデルダウンロードカード ### 基本構文 ```markdown :::model[モデル名](モデルファイル URL) ::: ``` ### 使用例 ```markdown :::model[UIM342 モーター 3D モデル](/media/uim342-model.step) ::: :::model[UIC320 配線端子](/media/uic320-terminal.stp) ::: ``` ### サポートされている形式 | 形式 | 拡張子 | 説明 | |------|--------|------| | STEP | `.step`、`.stp` | 3D CAD モデル | | STL | `.stl` | 3D プリンティングモデル | | IGES | `.iges`、`.igs` | 汎用 CAD 交換形式 | ### レンダリング効果 モデルカードは以下を表示： - ファイルアイコン - モデル名 - ファイル形式ラベル - ダウンロードボタン ダウンロードボタンをクリックしてモデルファイルを取得。 --- ## 画像 ### 基本構文 ```markdown  ``` ### 使用例 ```markdown   ``` ### 画像機能 | 機能 | 説明 | |------|------| | レスポンシブスケーリング | 画像がコンテナ幅に自動適応 | | 角丸 | 自動角丸スタイリング | | キャプション | alt テキストが画像下のキャプションとして自動表示 | | 遅延読み込み | スクロールでビューポートに入った時にのみ読み込み | ### キャプションスタイリング 画像の alt テキストは自動的に中央揃えのキャプションテキストとしてレンダリング： ```markdown  ``` レンダリング効果：画像下に「CAN バス端子クローズアップ」が表示されます。 --- ## ファイルダウンロードカード ### 基本構文 リンクが特定のファイルタイプを指す場合、自動的にダウンロードカードとしてレンダリング： ```markdown [ファイル表示名](ファイル URL) ``` ### サポートされているファイルタイプ | タイプ | 拡張子 | カードアイコン | |--------|--------|---------------| | PDF | `.pdf` | PDF アイコン | | Word | `.doc`、`.docx` | Word アイコン | | Excel | `.xls`、`.xlsx` | Excel アイコン | | CAD | `.step`、`.stp`、`.iges` | CAD アイコン | | アーカイブ | `.zip`、`.rar`、`.7z` | アーカイブアイコン | ### 使用例 ```markdown [製品データシート](/media/uim342-datasheet.pdf) [配線設定ファイル](/media/wiring-config.zip) [3D モデルファイル](/media/uim342-model.step) ``` ### レンダリング効果 ダウンロードカードは以下を表示： - ファイルタイプアイコン - ファイル名 - ファイルサイズ（可能な場合） - ダウンロードボタン ::: tip ファイルを `public/media/` ディレクトリに配置し、`/media/filename.ext` パスを使用すると、自動的にダウンロードカードが生成されます。 ::: --- ## コールアウトブロック（注意書き） ### 基本構文 ```markdown ::: タイプ コールアウトコンテンツ... ::: ``` ### 4 つのタイプ #### note（情報） ```markdown ::: note これは追加の背景知識やコンテキストを提供する補足情報です。 ::: ``` レンダリング効果：青いボーダー、左側に情報アイコン。 #### tip（ヒップ） ```markdown ::: tip これは有用なヒップやベストプラクティスの推奨事項です。 ::: ``` レンダリング効果：緑のボーダー、左側に電球アイコン。 #### warning（警告） ```markdown ::: warning これは特別な注意が必要な重要な注意事項です。 ::: ``` レンダリング効果：黄色のボーダー、左側に警告アイコン。 #### danger（危険） ```markdown ::: danger これは重要な安全情報です。不適切な操作は重大な結果を招く可能性があります。 ::: ``` レンダリング効果：赤いボーダー、左側に危険アイコン。 ### ネスト使用 コールアウトブロックには Markdown コンテンツを含めることができます： ```markdown ::: warning **重要：** 設定ファイルを変更する前に、バックアップを取ってください。 ```bash cp config.json config.json.bak ``` ::: ``` --- ## FAQ ブロック ### 基本構文 ```markdown ::: faq **Q: 質問内容？** 回答内容。 **Q: 別の質問？** 別の回答。 ::: ``` ### 使用例 ```markdown ::: faq **Q: デバイスをリセットするには？** リセットボタンを 5 秒間長押しして工場出荷時設定に復元します。 **Q: CAN バスの最大伝送距離は？** 250 kbps ボーレートで最大伝送距離は 30 メートルです。 **Q: サポートされている開発ボードは？** Arduino、STM32、ラズベリーパイなど、CAN インターフェースを備えたすべての開発ボードがサポートされています。 ::: ``` ### レンダリング効果 FAQ ブロックは以下のようにレンダリング： - 質問は太字で表示 - 回答は質問の直後に表示 - 各 Q&A ペア間に適切な間隔 --- ## 配線図（コードブロック内） ### アライメントルール コードブロック内で配線図を描く際は、等幅アライメントルールに従う必要があります： **正しい例（等幅アライメント）：** ``` V+ ———— +16~48VDC V− ———— GND CAN_H ———— CAN バス高 GND ———— システム地 ``` **間違った例（未アライメント）：** ``` V+ ———— +16~48VDC V− ———— GND CAN_H ———— CAN バス高 GND ———— システム地 ``` ### アライメント計算 - 各 ASCII 文字（英数字、記号）= 1 カラム - 各 CJK 文字（中国語、日本語、韓国語）= 2 カラム - `————`（全角ダッシュ）= 4 カラム - 各行の `————` は同じキャラクターカラムから開始すること **計算例：** ``` V+ ———— +16~48VDC │ │ │ └── カラム 7 から開始（V+ は 2 カラム + 5 スペース） └── カラム 1 から開始 CAN_H ———— CAN バス高 │ │ │ └── カラム 7 から開始（CAN_H は 5 カラム + 1 スペース） └── カラム 1 から開始 ``` --- ## 使用時の注意事項 ### 1. 拡張構文は完全でなければならない 各拡張ブロックは `:::type` で始まり、`:::` で終わる必要があります： ```markdown ::: note コンテンツ... ::: ``` 終了デリミタが欠落すると、レンダリングに問題が発生します。 ### 2. 空行の処理 拡張ブロック内には空行を含めることができますが、拡張ブロック間には 1 つの空行を置くことを推奨： ```markdown ::: note 最初のコールアウト。 ::: ::: tip 2 番目のコールアウト。 ::: ``` ### 3. ネスト制限 拡張構文は**ネストをサポートしていません**： ```markdown ::: note ::: tip これはレンダリングエラーを引き起こします。 ::: :: ``` ### 4. エスケープ テキスト内に `:::` を表示する必要がある場合は、バックスラッシュでエスケープ： ```markdown \::: note これはコールアウトブロックとしてレンダリングされません。 ::: ``` --- ## プラグイン開発 拡張構文の実装は `src/plugins/` ディレクトリにあります。各プラグインは Markdown-It プラグイン関数をエクスポートします。 ### プラグイン構造 ``` src/plugins/ video.js # 動画埋め込みプラグイン model.js # 3D モデルカードプラグイン callout.js # コールアウトブロックプラグイン faq.js # FAQ ブロックプラグイン download.js # ファイルダウンロードカードプラグイン ``` ### カスタム拡張 新しい拡張構文を追加する場合は、既存のプラグイン実装を参照： ```javascript // src/plugins/my-extension.js export default function myExtension(md) { md.block.ruler.before('fence', 'my_extension', (state, startLine, endLine, silent) => { // パースィングロジック }); } ``` --- *最終更新: 2026-06-06 | バージョン: v3.0.2*