logo
On this page

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.

Untitled
# Your Page Header
1
Copied!
How to WriteRendered Output
# Heading level 1

Heading level 1

## Heading level 2

Heading level 2

### Heading level 3

Heading level 3

#### Heading level 4

Heading level 4

##### Heading level 5
Heading level 5
###### Heading level 6
Heading level 6

Text formatting

We support most markdown formatting.

StyleHow to writeRendered Output
Bold**Bold text**Bold text
Italic_Italic text_Italic text
Strike~~Strikethrough~~Strikethrough

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.

StyleHow to writeRendered Output
Superscript<sup>superscript</sup>superscript
Subscript<sub>subscript</sub>subscript

lists

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

Number list

Best used for Number list.

Untitled
1. First list
2. Second list
3. Third list 
1
Copied!

Bulleted list

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

Best used for bulleted list.

Untitled
- First list
- Second list
- Third list 
1
Copied!
  • First list
  • Second list
  • Third list

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/)).

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

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.

Untitled
> I love using Docuo to generate online docs.
1
Copied!

The rendered output looks like this:

I love using Docuo to generate online docs.

Divider

Best used for divider.

Untitled
---
1
Copied!

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.

Untitled
| Title | Description  |
| ----- | ------------ |
| Item1 | Destription1 |
| Item2 | Destription2 |
1
Copied!

The rendered output looks like this:

TitleDescription
Item1Destription1
Item2Destription2

Callouts

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

  • Tip
Untitled
<Tip title="Tip">This suggests a helpful tip</Tip>
1
Copied!

The rendered output looks like this:

Tip
This suggests a helpful tip

  • Note
Untitled
<Note title="Note">This adds a note in the content</Note>
1
Copied!

The rendered output looks like this:

Note
This adds a note in the content

  • Warning
Untitled
<Warning title="Warning">This raises a warning to watch out for</Warning>
1
Copied!

The rendered output looks like this:

Warning
This raises a warning to watch out for

  • Error
Untitled
<Error title="ERROR">This raises a error to watch out for</Error>
1
Copied!

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)

Untitled
Add a `inline code block` in a sentence.
1
Copied!

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.

Untitled
```
helloWorld();
```
1
Copied!

The rendered output looks like this:

Untitled
helloWorld();
1
Copied!

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.

Untitled
```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;
```
1
Copied!
Untitled
import React from 'react';

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

  return <div>Foo</div>;
}

export default MyComponent;
1
Copied!

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.

Untitled
```javascript helloWorld.js
console.log("Hello World");
```
1
Copied!
helloWorld.js
console.log("Hello World");
1
Copied!

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.

Untitled
```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;
```
1
Copied!
helloWorld.js
import React from 'react';

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

  return <div>Foo</div>;
}

export default MyComponent;
Copied!

Code groups

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

Untitled
<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>
1
Copied!

The rendered output looks like this:

helloWorld.js
hello_world.py
HelloWorld.java
console.log("Hello World");
1
Copied!
print('Hello World!')
1
Copied!
class HelloWorld {
    public static void main(String[] args) {
        System.out.println("Hello, World!");
    }
}
1
Copied!

Images

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

Untitled
<Frame width="300" height="auto" caption="image description text">
  <img src="/path/image.jpg" />
</Frame>
1
Copied!
IndexIndex typeDescription
widthvalue greater than 0, or "auto"The width of the image. If "aoto" is set, the image width will adapt to the page.
heightvalue greater than 0, or "auto"The width of the image. If "aoto" is set, the image height will adapt to the page.
captionstringText description at the bottom of the image.

Videos

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

Untitled
<Video src="https://youtube.com/xxxxxx"/>
1
Copied!