# Markdown Extensions Syntax Reference > Complete reference manual for GEO Wiki Pro custom Markdown extensions syntax --- ## Overview GEO Wiki Pro provides a set of extended syntax on top of standard Markdown for embedding videos, 3D models, callout blocks, and other special content. These extensions are implemented through custom plugins located in the `src/plugins/` directory. All extensions use `:::` as delimiters. --- ## Extensions Overview | Syntax | Description | Example | |--------|-------------|---------| | `:::video[description](url)` | Video embedding | `:::video[Bilibili Video](https://bilibili.com/video/BVxxx)` | | `:::model[title](url)` | 3D model download card | `:::model[Motor Model](/media/model.step)` | | `` | Image (alt auto-displayed as caption) | `` | | `[name](url)` | File download card (PDF/DOC, etc.) | `[User Manual](/media/manual.pdf)` | | `::: note/tip/warning/danger` | Callout blocks | `:::note\nDescription text\n:::` | | `::: faq` | FAQ block | `:::faq\n**Q: ...**\n...\n:::` | --- ## Video Embedding ### Basic Syntax ```markdown :::video[Video Title](Video URL) ::: ``` ### Usage Examples **Bilibili Video:** ```markdown :::video[CAN Bus Wiring Tutorial](https://bilibili.com/video/BV1xx411c7XW) ::: ``` **YouTube Video:** ```markdown :::video[Arduino CAN Bus Tutorial](https://www.youtube.com/watch?v=dQw4w9WgXcQ) ::: ``` ### Supported Platforms | Platform | Supported Formats | Description | |----------|-------------------|-------------| | Bilibili | `bilibili.com/video/BVxxx` | Auto-embed iframe | | YouTube | `youtube.com/watch?v=xxx` or `youtu.be/xxx` | Auto-embed iframe | | Others | Standard video URLs | Attempt generic embedding | ### Rendering Effect Embedded videos display as responsive video players with title descriptions. They automatically adjust size on mobile devices. ::: note Video URLs must be complete, publicly accessible addresses. Private videos requiring login are not supported. ::: --- ## 3D Model Download Cards ### Basic Syntax ```markdown :::model[Model Name](Model File URL) ::: ``` ### Usage Examples ```markdown :::model[UIM342 Motor 3D Model](/media/uim342-model.step) ::: :::model[UIC320 Wiring Terminal](/media/uic320-terminal.stp) ::: ``` ### Supported Formats | Format | Extensions | Description | |--------|------------|-------------| | STEP | `.step`, `.stp` | 3D CAD models | | STL | `.stl` | 3D printing models | | IGES | `.iges`, `.igs` | Universal CAD exchange format | ### Rendering Effect Model cards display: - File icon - Model name - File format label - Download button Click the download button to obtain the model file. --- ## Images ### Basic Syntax ```markdown  ``` ### Usage Examples ```markdown   ``` ### Image Features | Feature | Description | |---------|-------------| | Responsive Scaling | Images automatically adapt to container width | | Rounded Corners | Automatic rounded corner styling | | Captions | Alt text automatically displayed as caption below image | | Lazy Loading | Images load only when scrolled into viewport | ### Caption Styling Image alt text automatically renders as centered caption text: ```markdown  ``` Rendering effect: "CAN Bus Terminal Close-up" displayed below the image. --- ## File Download Cards ### Basic Syntax When links point to specific file types, they automatically render as download cards: ```markdown [File Display Name](File URL) ``` ### Supported File Types | Type | Extensions | Card Icon | |------|------------|-----------| | PDF | `.pdf` | PDF icon | | Word | `.doc`, `.docx` | Word icon | | Excel | `.xls`, `.xlsx` | Excel icon | | CAD | `.step`, `.stp`, `.iges` | CAD icon | | Archives | `.zip`, `.rar`, `.7z` | Archive icon | ### Usage Examples ```markdown [Product Datasheet](/media/uim342-datasheet.pdf) [Wiring Configuration File](/media/wiring-config.zip) [3D Model File](/media/uim342-model.step) ``` ### Rendering Effect Download cards display: - File type icon - File name - File size (if available) - Download button ::: tip Place files in `public/media/` directory and use `/media/filename.ext` paths to automatically generate download cards. ::: --- ## Callout Blocks (Admonitions) ### Basic Syntax ```markdown ::: type Callout content... ::: ``` ### Four Types #### note (Information) ```markdown ::: note This is supplementary information providing additional background knowledge or context. ::: ``` Rendering effect: Blue border with information icon on the left. #### tip (Tip) ```markdown ::: tip This is a helpful tip or best practice recommendation. ::: ``` Rendering effect: Green border with lightbulb icon on the left. #### warning (Warning) ```markdown ::: warning This is an important caution requiring special attention. ::: ``` Rendering effect: Yellow border with warning icon on the left. #### danger (Danger) ```markdown ::: danger This is critical safety information; improper operation may cause serious consequences. ::: ``` Rendering effect: Red border with danger icon on the left. ### Nested Usage Callout blocks can contain Markdown content: ```markdown ::: warning **Important:** Before modifying configuration files, please backup first. ```bash cp config.json config.json.bak ``` ::: ``` --- ## FAQ Blocks ### Basic Syntax ```markdown ::: faq **Q: Question content?** Answer content. **Q: Another question?** Another answer. ::: ``` ### Usage Examples ```markdown ::: faq **Q: How do I reset the device?** Press and hold the reset button for 5 seconds to restore factory settings. **Q: What is the maximum CAN bus transmission distance?** At 250 kbps baud rate, the maximum transmission distance is 30 meters. **Q: Which development boards are supported?** All development boards with CAN interfaces are supported, including Arduino, STM32, and Raspberry Pi. ::: ``` ### Rendering Effect FAQ blocks render as: - Questions displayed in bold - Answers immediately following questions - Proper spacing between Q&A pairs --- ## Wiring Diagrams (Inside Code Blocks) ### Alignment Rules When drawing wiring diagrams in code blocks, equal-width alignment rules must be followed: **Correct Example (Equal-width Alignment):** ``` V+ ———— +16~48VDC V− ———— GND CAN_H ———— CAN 总线高 GND ———— 系统地 ``` **Incorrect Example (Misaligned):** ``` V+ ———— +16~48VDC V− ———— GND CAN_H ———— CAN 总线高 GND ———— 系统地 ``` ### Alignment Calculation - Each ASCII character (letter, number, symbol) = 1 column - Each CJK character (Chinese, Japanese, Korean) = 2 columns - `————` (full-width em dashes) = 4 columns - `————` must start at the same character column in each row **Calculation Example:** ``` V+ ———— +16~48VDC │ │ │ └── Starts at column 7 (V+ is 2 columns + 5 spaces) └── Starts at column 1 CAN_H ———— CAN 总线高 │ │ │ └── Starts at column 7 (CAN_H is 5 columns + 1 space) └── Starts at column 1 ``` --- ## Usage Considerations ### 1. Extensions Must Be Complete Each extension block must start with `:::type` and end with `:::`: ```markdown ::: note Content... ::: ``` Missing closing delimiters will cause rendering issues. ### 2. Empty Line Handling Extension blocks can contain empty lines, but it's recommended to keep one empty line between extension blocks: ```markdown ::: note First callout. ::: ::: tip Second callout. ::: ``` ### 3. Nesting Limitations Extensions **do not support** nesting: ```markdown ::: note ::: tip This will cause rendering errors. ::: :: ``` ### 4. Escaping To display `:::` in text, use backslash escaping: ```markdown \::: note This will not be rendered as a callout block. ::: ``` --- ## Plugin Development Extension syntax implementations are located in the `src/plugins/` directory. Each plugin exports a Markdown-It plugin function. ### Plugin Structure ``` src/plugins/ video.js # Video embedding plugin model.js # 3D model card plugin callout.js # Callout block plugin faq.js # FAQ block plugin download.js # File download card plugin ``` ### Custom Extensions To add new extension syntax, refer to existing plugin implementations: ```javascript // src/plugins/my-extension.js export default function myExtension(md) { md.block.ruler.before('fence', 'my_extension', (state, startLine, endLine, silent) => { // Parsing logic }); } ``` --- *Last updated: 2026-06-06 | Version: v3.0.2*