SuperAPI AI Directory
Partner with us中文AI newsFavorites
Skillsmarkdown-syntax-guide

markdown-syntax-guide

Writing & research

View repository

Updated 10-15 19:56

About this skill

Markdown Syntax Guide Skill

When a user or AI needs to generate content that can be correctly parsed by the Markdown editor/renderer of @ant-design/agentic-ui, use this skill to provide accurate syntax guidance.

Skill Activation Scenarios

Trigger Keywords Guidance Content
表格, table Basic tables + advanced tables + chart-based tables
视频, video HTML video tag + image-style video syntax
图表, chart, 柱状图, 饼图, 折线图 chartType configuration + Mermaid
卡片, card, link-card Link card syntax
提示块, alert, info, warning ::: syntax
Mermaid, 流程图, 时序图 Mermaid code blocks
附件, attachment Attachment display syntax
MDX, 内嵌组件 React component embedding
apaasify aPaaS Schema code blocks
怎么写, 语法, 格式 Comprehensive syntax quick reference

Syntax Quick Reference Table

1. Tables

Basic Markdown tables

| 标题 1 | 标题 2 | 标题 3 |
| :----- | :----: | -----: |
| 左对齐 |  居中  | 右对齐 |
| 内容   |  内容  |   内容 |

Advanced tables(enabled via HTML comments)

<!-- {"chartType": "table"} -->

| 姓名 | 年龄 | 职业   |
| :--- | :--- | :----- |
| 张三 | 28   | 工程师 |
| 李四 | 32   | 设计师 |

Render tables as charts(bar charts, pie charts, line charts, etc.)

<!-- {"chartType": "bar", "x": "产品", "y": "销量", "title": "销量对比"} -->

| 产品 | 销量 |
| :--- | :--- |
| A    | 100  |
| B    | 150  |
| C    | 80   |

Supported chartType：bar(bar),column(column),line(line),area(area),pie(pie),donut(donut),radar(radar),scatter(scatter),funnel(funnel),table(table),descriptions(definition list).

2. Video

Method 1: HTML video tag

<video src="https://example.com/video.mp4" controls width="400"></video>

With full attributes:

<video src="video.mp4" controls autoplay loop muted poster="poster.jpg" width="640" height="360"></video>

Multiple format sources:

<video controls width="600">
  <source src="https://example.com/video.mp4" type="video/mp4">
  <source src="https://example.com/video.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Method 2: Image-style video syntax(extended Markdown, similar to image syntax)

![video:视频名称](https://example.com/video.mp4)

alt Uses the video:自定义名称 format; when rendered, it is recognized as a video and an embedded player is inserted.

3. Charts

Mermaid charts

```mermaid
graph TD
    A[开始] --> B{判断}
    B -- 是 --> C[执行]
    B -- 否 --> D[结束]
    C --> D
```

Supports Mermaid syntax such as flowcharts, sequence diagrams, Gantt charts, etc.

Table-based data charts

Add an HTML comment above the table to configure chartType and the axis fields:

<!-- {"chartType": "pie", "x": "类型", "y": "占比", "title": "类型分布"} -->
<!-- {"chartType": "line", "x": "月份", "y": "销量"} -->
<!-- {"chartType": "column", "x": "品牌", "y": "销量"} -->
<!-- {"chartType": "radar", "x": "指标", "y": "得分", "groupBy": "维度"} -->
<!-- {"chartType": "funnel", "x": "阶段", "y": "人数"} -->

Multi-chart configuration(multiple displays for the same table)

<!-- [{"chartType": "bar", "x": "产品", "y": "销量"}, {"chartType": "pie", "x": "产品", "y": "销量"}] -->

| 产品 | 销量 |
| :--- | :--- |
| A    | 100  |
| B    | 150  |

For detailed configuration, see docs/utils/chart-config.md。

4. Cards

Link cards（Link Card）

Format: HTML comment {"type": "card", ...} + the immediately following Markdown link.

<!-- {"type": "card", "icon": "https://example.com/icon.svg", "title": "卡片标题", "description": "卡片描述"} -->
[链接文本](https://example.com "悬停提示")

Simplified example:

<!-- {"type": "card", "title": "网易", "description": "Electronic Gaming & Multimedia"} -->
[网易](https://example.com/company/49 "公司信息")

The comment must be in the same paragraph as the link, and type must be "card"。

Embedded React components (MDX)

import { Card } from 'antd';

<Card title="卡片标题">
  卡片内容
</Card>

5. Alerts

Use the ::: syntax:

:::info
这是信息提示块。
:::

:::warning
这是警告提示块。
:::

:::success
这是成功提示块。
:::

:::error
这是错误提示块。
:::

6. Attachments

![attachment:文件名.pdf](https://example.com/file.pdf)

alt Uses the attachment:显示名称 format, rendered as a downloadable attachment link.

7. Other extensions

Task lists

- [x] 已完成任务
- [ ] 未完成任务

aPaaSify Schema components

```apaasify
{
  "type": "page",
  "body": [
    {
      "type": "button",
      "label": "点击我"
    }
  ]
}
```

3D models(if supported by the project)

```model
format: glb
source: https://example.com/3d/model.glb
camera:
  position: [0, 2, 5]
  target: [0, 0, 0]
```

Audio

```audio
source: https://example.com/audio/note.mp3
title: 功能说明
```

Guidelines

  1. Prioritize giving examples that can be copied directly: users usually need something they can "modify and use" right away.
  2. The description must be immediately adjacent: the table's chartType comment must be immediately above the table; the comment for a link card must be in the same paragraph as the link.
  3. Field names must match the table columns：x、y and other fields must correspond to the column names in the table.
  4. Strict JSON format: the JSON inside an HTML comment must not have trailing commas or comments, otherwise parsing will fail.
  5. Distinguish rendering environments: MDX, apaasify, etc. depend on the specific project configuration, so it is necessary to state "if the project supports it".

Reference documentation

Documentation Content
docs/utils/markdown-syntax.md Complete Markdown syntax (Chinese)
docs/utils/markdown-syntax.en-US.md English syntax version
docs/utils/chart-config.md Detailed chart configuration
docs/demos-pages/video.md Video support notes

Quick reply templates

When the user asks "how to add tables/videos/charts/cards in Markdown", you can reuse the examples from the corresponding sections above, and add a note (such as "just replace the URLs and column names in the examples with your data").

Command-line quick reference (optional)

If you need to quickly obtain a code snippet for a certain type of syntax, you can run:

# 查看所有可用关键词
python .cursor/skills/markdown-syntax-guide/scripts/lookup.py -l

# 获取表格语法
python .cursor/skills/markdown-syntax-guide/scripts/lookup.py table.advanced

# 获取柱状图语法
python .cursor/skills/markdown-syntax-guide/scripts/lookup.py chart.bar

# 获取视频语法
python .cursor/skills/markdown-syntax-guide/scripts/lookup.py video.html

The syntax snippet data is located in data/syntax-snippets.json。