Basic Usage

In this section, we will explain the MDX used to build data applications with Morph. MDX is a format for writing Markdown files using React components.

About Markdown Syntax

Markdown is a language that allows you to style text with simple notation. It is often used in blog posts, documentation, and GitHub repository README files. Below are examples of typical syntax.

Headings

Headings are written with lines starting with #. The more # there are, the lower the level of the heading.

• Code Example
• Output

# Heading 1
## Heading 2
### Heading 3

Emphasis

Emphasis is written by enclosing text with * or _.

• Code Example
• Output

**Bold** and *Italic*

Lists

Lists are written with lines starting with - or 1.. - represents unordered lists, and 1. represents ordered lists.

• Code Example
• Output

- Item 1
- Item 2
- Item 3

Links

Links are written as [link text](URL).

• Code Example
• Output

![Morph](https://docs.morph-data.io/assets/images/pages/data-table.jpg)

Images

Images are written as ![alt text](image URL).

• Code Example
• Output

![Morph](https://morph.codes/assets/img/logo.png)

Code

Code is written by enclosing it with ```.

• Code Example
• Output

\```
console.log('Hello, Morph!')
\```

Github Flavored Markdown

Morph supports GitHub Flavored Markdown (GFM). GFM is an extended specification of Markdown provided by GitHub, adding features such as tables, task lists, and syntax highlighting for code blocks.

Tables

Tables are written with lines separated by |.

• Code Example
• Output

| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Content 1 | Content 2 | Content 3 |

Task Lists

Task lists are written with - [ ] or - [x].

• Code Example
• Output

- [ ] Task 1
- [x] Task 2

Syntax Highlighting for Code Blocks

Syntax highlighting for code blocks is written as ```language.

• Code Example
• Output

\```javascript
console.log('Hello, Morph!')
\```

HTML

Markdown can also embed HTML. By embedding HTML, you can achieve more advanced layouts and functions that cannot be expressed with Markdown syntax.

However, styles and class names must be written according to JSX notation.

• Code Example
• Output

<div className="rounded-lg" style={{backgroundColor: '#f0f0f0', padding: '16px'}}>
  <p>You can also embed HTML.</p>
</div>

You can also insert HTML tags within Markdown blocks.

• Code Example
• Output

## Insert <span style={{ color: 'pink' }}>HTML</span>

Conversely, you can also insert Markdown within HTML blocks.

• Code Example
• Output

<div>
  ## Heading 2
</div>