### Mindmap Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/vditor-tutorial/zh-CN.md

Vditor supports mindmaps using a specific markdown syntax. This example outlines a tutorial structure with nested topics.

```mindmap
- 教程
- 语法指导
  - 普通内容
  - 提及用户
  - 表情符号 Emoji
    - 一些表情例子
  - 大标题 - Heading 3
    - Heading 4
      - Heading 5
        - Heading 6
  - 图片
  - 代码块
    - 普通
    - 语法高亮支持
      - 演示 Go 代码高亮
      - 演示 Java 高亮
  - 有序、无序、任务列表
    - 无序列表
    - 有序列表
    - 任务列表
  - 表格
  - 隐藏细节
  - 段落
  - 链接引用
  - 数学公式
  - 脑图
  - 流程图
  - 时序图
  - 甘特图
  - 图表
  - 五线谱
  - Graphviz
  - 多媒体
  - 脚注
- 快捷键
```

--------------------------------

### Multi-line Math Formula

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/vditor-tutorial/zh-CN.md

Use $$ delimiters for multi-line mathematical equations. This example shows a complex fraction and series expansion.

```latex
\frac{1}{\sqrt{\phi \sqrt{5}}-\phi} e^{\frac25 \pi}} = 1+\frac{e^{-2\pi}} {1+\frac{e^{-4\pi}} {
    1+\frac{e^{-6\pi}} {
    1+\frac{e^{-8\pi}}{1+\cdots}
  }
}
}
```

--------------------------------

### Blazor Start with Brotli Decode

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.WebAssembly/wwwroot/index.html

Configures Blazor to load .NET assets, including custom logic for decompressing Brotli-compressed files (.br) when not on localhost. This optimizes asset loading by serving decompressed content.

```javascript
import { BrotliDecode } from './js/decode.min.js';
Blazor.start({
    loadBootResource: function (type, name, defaultUri, integrity) {
        if (type !== 'dotnetjs' && location.hostname !== 'localhost' && type !== 'configuration') {
            return (async function () {
                const response = await fetch(defaultUri + '.br', {
                    cache: 'no-cache'
                });
                if (!response.ok) {
                    throw new Error(response.statusText);
                }
                const originalResponseBuffer = await response.arrayBuffer();
                const originalResponseArray = new Int8Array(originalResponseBuffer);
                const decompressedResponseArray = BrotliDecode(originalResponseArray);
                const contentType = type === 'dotnetwasm' ? 'application/wasm' : 'application/octet-stream';
                return new Response(decompressedResponseArray, {
                    headers: {
                        'content-type': contentType
                    }
                });
            })();
        }
    }
});
```

--------------------------------

### Inline Math Formula

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/vditor-tutorial/zh-CN.md

Use single dollar signs $ delimiters for inline mathematical expressions within text. This example demonstrates a simple Pythagorean theorem.

```latex
a^2 + b^2 = \color{red}c^2
```

--------------------------------

### Include Raw Assets in .csproj

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Maui/Resources/Raw/AboutAssets.txt

Add this `MauiAsset` Build Action to your `.csproj` file to include all files in the `Resources\Raw` directory and its subdirectories.

```xml
<MauiAsset Include="Resources\Raw\**" LogicalName="%(RecursiveDir)%(Filename)%(Extension)" />
```

--------------------------------

### Access Raw Asset at Runtime

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Maui/Resources/Raw/AboutAssets.txt

Use `FileSystem.OpenAppPackageFileAsync` to open a stream to a raw asset deployed with your application. Ensure the file exists in the specified path.

```csharp
async Task LoadMauiAsset()
{
    using var stream = await FileSystem.OpenAppPackageFileAsync("AboutAssets.txt");
    using var reader = new StreamReader(stream);

    var contents = reader.ReadToEnd();
}
```

--------------------------------

### Markdown Highlight Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Demonstrates how to highlight text using double equals signs.

```markdown
I need to highlight these ==very important words==
```

--------------------------------

### Markdown Table Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Demonstrates the structure for creating tables with headers and rows, using pipes and hyphens for separation.

```markdown
| Syntax | Description |
| ----------- | ----------- |
| Header | Title |
| Paragraph | Text |
```

--------------------------------

### Markdown Heading Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Demonstrates how to create headings of different levels using the '#' symbol. Each '#' corresponds to a heading level.

```markdown
# H1
## H2
### H3
```

--------------------------------

### Markdown Subscript Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Shows how to create subscript text using tildes.

```markdown
H~2~O
```

--------------------------------

### Markdown Unordered List Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Shows how to create unordered lists using hyphens, asterisks, or plus signs followed by a space.

```markdown
- First item
- Second item
- Third item
```

--------------------------------

### Markdown Task List Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Shows the syntax for creating task lists, using hyphens followed by square brackets containing 'x' for checked items or a space for unchecked items.

```markdown
- [x] Write the press release
- [ ] Update the website
- [ ] Contact the media
```

--------------------------------

### Markdown Superscript Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Illustrates how to create superscript text using carets.

```markdown
X^2^
```

--------------------------------

### Markdown Footnote Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Illustrates the syntax for creating footnotes, using a caret and number in square brackets for the reference and a separate block for the footnote definition.

```markdown
Here's a sentence with a footnote. [^1]

[^1]: This is the footnote.
```

--------------------------------

### Markdown Ordered List Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Provides the syntax for creating ordered lists using numbers followed by a period and a space.

```markdown
1. First item
2. Second item
3. Third item
```

--------------------------------

### Markdown Strikethrough Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Demonstrates how to apply strikethrough formatting to text using double tildes.

```markdown
~~The world is flat.~~
```

--------------------------------

### Markdown Link Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Shows the syntax for creating hyperlinks, consisting of link text in square brackets and the URL in parentheses.

```markdown
[Markdown Guide](https://www.markdownguide.org)
```

--------------------------------

### Mermaid Sequence Diagram

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/vditor-tutorial/en-US.md

Create sequence diagrams to illustrate interactions between components over time using Mermaid syntax.

```mermaid
sequenceDiagram
    Alice->>John: Hello John, how are you?
    loop Every minute
        John-->>Alice: Great!
    end
```

--------------------------------

### Markdown Blockquote Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Explains how to create blockquotes using the '>' symbol at the beginning of a line.

```markdown
> blockquote
```

--------------------------------

### Markdown Bold Text Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Shows how to apply bold formatting to text using double asterisks.

```markdown
**bold text**
```

--------------------------------

### Markdown Definition List Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Provides the syntax for creating definition lists, where a term is followed by a colon and its definition.

```markdown
term
: definition
```

--------------------------------

### Markdown Inline Code Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Demonstrates how to format short pieces of code or commands within a line of text using single backticks.

```markdown
`code`
```

--------------------------------

### Mermaid Gantt Chart

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/vditor-tutorial/en-US.md

Define Gantt charts to visualize project schedules and task dependencies using Mermaid syntax.

```mermaid
gantt
    title A Gantt Diagram
    dateFormat  YYYY-MM-DD
    section Section
    A task           :a1, 2019-01-01, 30d
    Another task     :after a1  , 20d
    section Another
    Task in sec      :2019-01-12  , 12d
    another task      : 24d
```

--------------------------------

### Markdown Fenced Code Block Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Shows how to create code blocks using triple backticks, optionally specifying the language for syntax highlighting.

```markdown
```
{
  "firstName": "John",
  "lastName": "Smith",
  "age": 25
}
```
```

--------------------------------

### Markdown Emoji Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Illustrates how to insert emoji using shortcodes, typically enclosed in colons.

```markdown
That is so funny! :joy:
```

--------------------------------

### Echarts Configuration

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/vditor-tutorial/en-US.md

Configure Echarts for creating interactive charts and data visualizations.

```json
{
  "title": { "text": "Last 30 days" },
  "tooltip": { "trigger": "axis", "axisPointer": { "lineStyle": { "width": 0 } } },
  "legend": { "data": ["Post", "User", "Reply"] },
  "xAxis": [{
      "type": "category",
      "boundaryGap": false,
      "data": ["2019-05-08","2019-05-09","2019-05-10","2019-05-11","2019-05-12","2019-05-13","2019-05-14","2019-05-15","2019-05-16","2019-05-17","2019-05-18","2019-05-19","2019-05-20","2019-05-21","2019-05-22","2019-05-23","2019-05-24","2019-05-25","2019-05-26","2019-05-27","2019-05-28","2019-05-29","2019-05-30","2019-05-31","2019-06-01","2019-06-02","2019-06-03","2019-06-04","2019-06-05","2019-06-06","2019-06-07"],
      "axisTick": { "show": false },
      "axisLine": { "show": false }
  }],
  "yAxis": [{ "type": "value", "axisTick": { "show": false }, "axisLine": { "show": false }, "splitLine": { "lineStyle": { "color": "rgba(0, 0, 0, .38)", "type": "dashed" } } }],
  "series": [
    {
      "name": "Post", "type": "line", "smooth": true, "itemStyle": { "color": "#d23f31" }, "areaStyle": { "normal": {} }, "z": 3,
      "data": ["18","14","22","9","7","18","10","12","13","16","6","9","15","15","12","15","8","14","9","10","29","22","14","22","9","10","15","9","9","15","0"]
    },
    {
      "name": "User", "type": "line", "smooth": true, "itemStyle": { "color": "#f1e05a" }, "areaStyle": { "normal": {} }, "z": 2,
      "data": ["31","33","30","23","16","29","23","37","41","29","16","13","39","23","38","136","89","35","22","50","57","47","36","59","14","23","46","44","51","43","0"]
    },
    {
      "name": "Reply", "type": "line", "smooth": true, "itemStyle": { "color": "#4285f4" }, "areaStyle": { "normal": {} }, "z": 1,
      "data": ["35","42","73","15","43","58","55","35","46","87","36","15","44","76","130","73","50","20","21","54","48","73","60","89","26","27","70","63","55","37","0"]
    }
  ]
}
```

--------------------------------

### Markdown Image Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Provides the syntax for embedding images, similar to links but with an exclamation mark at the beginning.

```markdown
![alt text](https://www.markdownguide.org/assets/images/tux.png)
```

--------------------------------

### Mermaid Graph

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/vditor-tutorial/en-US.md

Generate directed graphs using Mermaid syntax for visualizing relationships and flows.

```mermaid
graph TB
    c1-->a2
    subgraph one
    a1-->a2
    end
    subgraph two
    b1-->b2
    end
    subgraph three
    c1-->c2
    end
```

--------------------------------

### SPA Routing Redirect Script for GitHub Pages

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.WebAssembly/wwwroot/404.html

This JavaScript code modifies the current URL to consolidate path and query string information into a query string format, suitable for SPA routing on GitHub Pages. It handles the conversion of '&' characters to '~and~' and preserves the hash fragment. Ensure this 404.html file is at least 512 bytes for Internet Explorer compatibility.

```javascript
var pathSegmentsToKeep = 1;
var l = window.location;
l.replace( l.protocol + '//' + l.hostname + (l.port ? ':' + l.port : '') + l.pathname.split('/').slice(0, 1 + pathSegmentsToKeep).join('/') + '/?/' + l.pathname.slice(1).split('/').slice(pathSegmentsToKeep).join('/').replace(/&/g, '~and~') + (l.search ? '&' + l.search.slice(1).replace(/&/g, '~and~') : '') + l.hash );
```

--------------------------------

### Markdown Italic Text Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Illustrates how to format text in italics using single asterisks.

```markdown
*italicized text*
```

--------------------------------

### Markdown Horizontal Rule Syntax

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/markdown-syntax/en-US.md

Illustrates the syntax for creating a horizontal rule using three or more hyphens, asterisks, or underscores.

```markdown
---
```

--------------------------------

### Multiline Formula Block

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/vditor-tutorial/en-US.md

Render complex mathematical formulas using LaTeX syntax within a multiline block.

```markdown
$$\frac{1}{\Bigl(\sqrt{\phi \sqrt{5}}-\phi\Bigr) e^{\frac25 \pi}} = 1+\frac{e^{-2\]pi}} {1+\frac{e^{-4\]pi}} {\quad 1+\frac{e^{-6\]pi}} {\quad 1+\frac{e^{-8\]pi}}{1+\cdots}} \quad}$$
```

--------------------------------

### Mindmap Diagram

Source: https://github.com/yu-core/swashbucklerdiary/blob/master/src/SwashbucklerDiary.Rcl/wwwroot/docs/vditor-tutorial/en-US.md

Create hierarchical mindmaps to visualize ideas and structures using mindmap syntax.

```mindmap
- Tutorial
- Grammar guidance
  - Ordinary content
  - Mention users
  - Emoji
    - Some examples of facial expressions
  - Headline - Heading 3
    - Heading 4
      - Heading 5
        - Heading 6
  - Picture
  - Code Block
    - Normal
    - Grammar highlighting support
      - Demonstrating Go code highlighting
      - Show Java Highlights
  - Ordered, unordered, task list
    - Unordered list
    - Ordered List
    - Task List
  - Table
  - Hide details
  - Paragraph
  - Link reference
  - Mathematical formulas
  - Brain map
  - Flowchart
  - Time series diagram
  - Gantt chart
  - Chart
  - Staff notation
  - Graphviz
  - Multimedia
  - Footnotes
- Shortcut keys
```