Docs components

This section introduce how to use mdx components to enrich your docs content. We support most markdown applications.

Titles and headings

Best used for page headers.

# Your Page Header

Text formatting

We support most markdown formatting.

You can combine these to emphasize text with bold and italics at the same time. For example, you can write **_Bold with Italic_** or __*Bold with Italic*__ to get Bold with Italic text.

If you want to write superscript or subscript text, you need to use HTML.

lists

You can order your content into ordered number lists or unrdered bulleted lists.

Number list

Best used for Number list.

1. First list
2. Second list
3. Third list 

Bulleted list

You can add-, *, or+ in front of each line items to create bulleted lists.

Best used for bulleted list.

- First list
- Second list
- Third list 

• First list
• Second list
• Third list

Links

Inorder to create a link, you can enclose the link text in brackets (e.g., [Docuo]) and then follow it immediately with the URL in parentheses (e.g., (https://www.spreading.ai/)).

I love using [Docuo](https://www.spreading.ai/) to generate online docs.

The rendered output looks like this: I love using Docuo to generate online docs.

Quotes

You can add a > in front of a paragraph to create a quote.

> I love using Docuo to generate online docs.

The rendered output looks like this:

I love using Docuo to generate online docs.

Divider

Best used for divider.

---

Tables

We support the offical markdown table syntax.

To add a table, use three or more hyphens --- to create each column’s header, and use pipes | to separate each column. You should also add a pipe on either end of the row.

| Title | Description  |
| ----- | ------------ |
| Item1 | Destription1 |
| Item2 | Destription2 |

The rendered output looks like this:

Callouts

There are four types of callouts prepared for you to match different needs, including <Tip>, <Note>, <Warning>, and <Error>.

• Tip

<Tip title="Tip">This suggests a helpful tip</Tip>

The rendered output looks like this:

Tip

This suggests a helpful tip

• Note

<Note title="Note">This adds a note in the content</Note>

The rendered output looks like this:

Note

This adds a note in the content

• Warning

<Warning title="Warning">This raises a warning to watch out for</Warning>

The rendered output looks like this:

Warning

This raises a warning to watch out for

• Error

<Error title="ERROR">This raises a error to watch out for</Error>

The rendered output looks like this:

ERROR

This raises a error to watch out for

Code blocks

Inline code blocks

You can enclose the inline code in backticks (e.g., Docuo)

Add a `inline code block` in a sentence.

The rendered output looks like this: Add a inline code block in a sentence.

Single Code blocks

You can use fenced code blocks by enclosing code in three backticks.

```
helloWorld();
```

The rendered output looks like this:

helloWorld();

You can put the name of your programming language after the first three backticks to get syntax highlighting. Or you can indicate the lines to be highlighted in curly brackets.

```jsx {1,4-6,11}
import React from 'react';

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;
```

import React from 'react';

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;

You can add more text after the programming language to set the name of your code example. The text can be anything as long as its all in one line.

```javascript helloWorld.js
console.log("Hello World");
```

console.log("Hello World");

Code blocks show line numbers by default. If you want to hide line numbers, you can add hideLineNumbers at the end of the first three backticks.

```jsx helloWorld.js {1,4-6,11} hideLineNumbers
import React from 'react';

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;
```

import React from 'react';

function MyComponent(props) {
  if (props.isBar) {
    return <div>Bar</div>;
  }

  return <div>Foo</div>;
}

export default MyComponent;

Code groups

Use <CodeGroup> to aggregate multiple code blocks into one code group.

<CodeGroup>
```javascript helloWorld.js
console.log("Hello World");
```

```python hello_world.py
print('Hello World!')
```

```java HelloWorld.java
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
```
</CodeGroup>

The rendered output looks like this:

console.log("Hello World");

print('Hello World!')

class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}

Images

We support displaying images through repository path or by adding image path

<Frame width="300" height="auto" caption="image description text">
  <img src="/path/image.jpg" />
</Frame>

Videos

We support displaying Youtube，vimeo, and Loom online videos.

<Video src="https://youtube.com/xxxxxx"/>