---
title: "The Right Way of Markdown"
---

[Markdown](https://www.markdownguide.org/basic-syntax/) transforms your Dify app outputs from plain text dumps into properly formatted, professional responses. Use it in Answer and End nodes to render headers, lists, code blocks, tables, and more to create clear visual hierarchies for the end user.

## Basic Markdown Syntax in Dify

Use Markdown in your Answer / End nodes to render things like:

- Headings
- Bold and Italic text, strike-through text
- Lists
- Tables
- Fenced Code Blocks
- Audio and Video

<img
  src="/images/CleanShot2025-07-14at00.34.54.png"
  className="mr-auto"
/>

### Headings

Use `#` for headings, with the number of `#` symbols indicating the heading level:

```markdown
# Heading 1
## Heading 2
### Heading 3
```

### Bold, Italic, and Strikethrough

You can format text as bold, italic, or strikethrough:

```markdown
**Bold Text**
*Italic Text*
~~Strikethrough Text~~
```


### Lists

You can create ordered and unordered lists:

```markdown
- Unordered List Item 1
- Unordered List Item 2
  - Nested Unordered Item
1. Ordered List Item 1
2. Ordered List Item 2
   1. Nested Ordered Item
```

### Tables

You can create tables using pipes and dashes:

```markdown 
| Header 1 | Header 2 |
|----------|----------|
| Row 1 Col 1 | Row 1 Col 2 |
| Row 2 Col 1 | Row 2 Col 2 |
```

### Fenced Code Blocks

Use triple backticks to create fenced code blocks:

```python
def hello_world():
    print("Hello, World!")
```

### Audio and Video

You can embed audio and video files using the following syntax:

```markdown
<video controls>
  <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4">
</video>
<audio controls>
  <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
</audio>
```

## Advanced Markdown Features in Dify

### Button & Links

You might not be happy with the default follow-up questions generated by the LLM. In this case, you can use buttons and links to guide the conversation in a specific direction.

<img
  src="/images/screenshot-20250714-134035.png"
  className="mr-auto"
/>

You can use the following syntax to create buttons and links:

```
<button data-message="Hello Dify" data-variant="primary">Hello Dify</button>
<button data-message="Hello Dify" data-variant="danger">Hello Dify</button>
```

For buttons, we need to define two attributes `data-variant` and `data-message`.

- `data-variant`: The style of the button, can be `primary`, `secondary`, `warning`, `secondary-accent`, `ghost`, `ghost-accent`, `tertiary`.
- `data-message`: The message that will be sent when the button is clicked.

For links, it's more straightforward:

```
<a href="https://dify.ai" target="_blank">Dify</a>
```

Or you can use the `abbr` syntax to create an abbreviation link, this is useful for create interactive links that can be used in the conversation:

```
[Special Link](abbr:special-link)
```

### Form

For forms, we need to define the `data-format` attribute, which can be `json` or `text`. If not specified, it defaults to `text`. The form will be submitted as a JSON object if `data-format="json"` is set.

<img
  src="/images/screenshot-20250714-134150.png"
  className="mr-auto"
/>

#### Supported Input Types

Dify supports a variety of input types for forms, including:

- text
- textarea
- password
- time
- date
- datetime
- select
- checkbox
- hidden

If you want to render a form during the conversation, you can use the following syntax:

```
<form data-format="json"> // Default to text
  <label for="username">Username:</label>
  <input type="text" name="username" />
  <label for="hidden_input">Hidden input:</label>
  <input type="hidden" name="hidden_input" value="hidden_value" />
  <label for="password">Password:</label>
  <input type="password" name="password" />
  <label for="content">Content:</label>
  <textarea name="content"></textarea>
  <label for="date">Date:</label>
  <input type="date" name="date" />
  <label for="time">Time:</label>
  <input type="time" name="time" />
  <label for="datetime">Datetime:</label>
  <input type="datetime" name="datetime" />
  <label for="select">Select:</label>
  <input type="select" name="select" data-options='["hello","world"]'/>
  <input type="checkbox" name="check" data-tip="By checking this means you agreed"/>
  <button data-variant="primary">Login</button>
</form>
```

<Note>
  Hidden is not visible to users, you can set the value to pass data without user input.
</Note>

### Chart

We support rendering [echarts](https://dify.ai/docs/guides/tools/chart) in markdown. You can use the following syntax to render a chart:

<img
  src="/images/screenshot-20250714-134238.png"
  className="mr-auto"
/>

<Note>
  To render a chart, start a fenced code block with <code>\`\`\`echarts</code> and place your chart configuration inside.
</Note>

```echarts
{
  "title": {
    "text": "ECharts Entry Example"
  },
  "tooltip": {},
  "legend": {
    "data": ["Sales"]
  },
  "xAxis": {
    "data": ["Shirts", "Cardigans", "Chiffons", "Pants", "Heels", "Socks"]
  },
  "yAxis": {},
  "series": [{
    "name": "Sales",
    "type": "bar",
    "data": [5, 20, 36, 10, 10, 20]
  }]
}
```

### Music

Not only can you render charts, but also music sheets in markdown. We support rendering [ABC notation](https://paulrosen.github.io/abcjs/) in markdown. You can use the following syntax to render a music sheet:

<img
  src="/images/screenshot-20250714-134431.png"
  className="mr-auto"
/>

<Note>
  To render a music sheet, start a fenced code block with <code>\`\`\`abc</code> and place your ABC notation inside.
</Note>

```abc
X: 1
T: Cooley's
M: 4/4
L: 1/8
K: Emin
|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|
EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|
|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|
eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|
```

## Best Practices

If you want to predefine the markdown content, you can use the [template](/en/guides/workflow/node/template) feature in Dify. This allows you to use template content in downstream nodes.

{/*
Contributing Section
DO NOT edit this section!
It will be automatically generated by the script.
*/}

---

[Edit this page](https://github.com/langgenius/dify-docs/edit/main/en/workshop/basic/the-right-way-of-markdown.mdx) | [Report an issue](https://github.com/langgenius/dify-docs/issues/new?template=docs.yml)

