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. 
# Heading 1
## Heading 2
### Heading 3

​
Emphasis

Emphasis is written by enclosing text with * or _. 
**Bold** and *Italic*

​
Lists

Lists are written with lines starting with - or 1.. - represents unordered lists, and 1. represents ordered lists. 
- Item 1
- Item 2
- Item 3
Links are written as [link text](URL). 
![Morph](https://docs.morph-data.io/assets/images/pages/data-table.jpg)

​
Images

Images are written as ![alt text](image URL). 
![Morph](https://morph.codes/assets/img/logo.png)

​
Code

Code is written by enclosing it with ```. 
\```
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 |. 
| Header 1 | Header 2 | Header 3 |
| -------- | -------- | -------- |
| Content 1 | Content 2 | Content 3 |

​
Task Lists

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

​
Syntax Highlighting for Code Blocks

Syntax highlighting for code blocks is written as ```language. 
\```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. 
<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. 
## Insert <span style={{ color: 'pink' }}>HTML</span>
Conversely, you can also insert Markdown within HTML blocks. 
<div>
  ## Heading 2
</div>