Markdown and Components

Interactive Editor

In the API Repository, you can add both API Specs and markdown files, which are organized in the same way.

Beyond standard markdown syntax, we’ve built in dozens of commonly used components like Tabs, Callouts, Cards, and more to help you build comprehensive and interactive documentation.

With our interactive markdown editor, you can easily create markdown documents without needing any markdown expertise. You can preview your document in real-time while editing.

Interactive Markdown Editor

built in components

Admonition

we predefined 6 types Admonitions, you use it markdown documents show alert message or notes.

Examples without title

markdown admonition

Code:


:::success[]
this is a success notice
 
:::
:::info[]
this is a info notice
 
:::
:::warning[]
this is a warning notice
 
:::
 
:::danger[]
this is a danger notice
 
:::
 
:::help[]
this is a help notice
 
:::
 
:::tip[]
this is a tip notice
 
:::

Notice content follows Markdown syntax.

Examples with title

markdown admonition

Code:


:::success[title]
this is a success notice
 
:::
:::info[title]
this is a info notice
 
:::
:::warning[title]
this is a warning notice
 
:::
 
:::danger[title]
this is a danger notice
 
:::
 
:::help[title]
this is a help notice
 
:::
 
:::tip[title]
this is a tip notice
 
:::

Tab

we support define ‘Tab’ in the markdown, insdie each Tab, the content follows Markdown syntax.

markdown Tab

Code:


<Tabs>
  <Tab title="First Tab">
    this is the first tab:
    ```javascript
    function $initHighlight(block, cls) {
    try {
        if (cls.search(/\bno\-highlight\b/) != -1)
        return process(block, true, 0x0F) +
                ` class="${cls}"`;
    } catch (e) {
        /* handle exception */
    }
    for (var i = 0 / 2; i < classes.length; i++) {
        if (checkCondition(classes[i]) === undefined)
        console.log('undefined');
    }
    }
 
    export  $initHighlight;
    ```
  </Tab>
  <Tab title="Second Tab">
    this is the second tab
  </Tab>
  <Tab title="Third Tab">
    this is the third tab
  </Tab>
</Tabs>

Accordions

Example: markdown Accordions

Code:


<Accordions>
  <Accordion title="Accordion 1" defaultExpanded>
    You can wrap anything you want inside Accordions.
  </Accordion>
  <Accordion title="Accordion 2">
    You can wrap anything you want inside Accordions.
    ```javascript
    function Hello() {
        console.log('Hello World');
    }
    ```  
  </Accordion>
</Accordions>

Card

Example: markdown Card

Code:


<Card title="Card title" >
  this is the card content
</Card>

Card Group

Example: markdown Card

Code:


<Cards direction="row" >
  <Card title="Card 1" >
    this is card 1 content
  </Card>
  <Card title="Card 2" href="https://apigit.com">
    this is card 2 content
  </Card>
</Cards>

Image Frame

Example: markdown Card

Code:


<ImageFrame caption="APIGIT - native git based API platform">
![apigit](https://static.apigit.com/apigit.svg)
</ImageFrame>

Container

Example: markdown container

Code:


<Container>
this is content of container
</Container>

Formula

Example: markdown Formula

Code:


# inline formula
$E = mc^2$
 
# block formula
$$
\TeX
$$