|
| 1 | +--- |
| 2 | +title: "The Right Way of Markdown" |
| 3 | +--- |
| 4 | + |
| 5 | +[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. |
| 6 | + |
| 7 | +## Basic Markdown Syntax in Dify |
| 8 | + |
| 9 | +Use Markdown in your Answer / End nodes to render things like: |
| 10 | + |
| 11 | +- Headings |
| 12 | +- Bold and Italic text, strike-through text |
| 13 | +- Lists |
| 14 | +- Tables |
| 15 | +- Fenced Code Blocks |
| 16 | +- Audio and Video |
| 17 | + |
| 18 | +<img |
| 19 | + src="/images/CleanShot2025-07-14at00.34.54.png" |
| 20 | + className="mr-auto" |
| 21 | +/> |
| 22 | + |
| 23 | +### Headings |
| 24 | + |
| 25 | +Use `#` for headings, with the number of `#` symbols indicating the heading level: |
| 26 | + |
| 27 | +```markdown |
| 28 | +# Heading 1 |
| 29 | +## Heading 2 |
| 30 | +### Heading 3 |
| 31 | +``` |
| 32 | + |
| 33 | +### Bold, Italic, and Strikethrough |
| 34 | + |
| 35 | +You can format text as bold, italic, or strikethrough: |
| 36 | + |
| 37 | +```markdown |
| 38 | +**Bold Text** |
| 39 | +*Italic Text* |
| 40 | +~~Strikethrough Text~~ |
| 41 | +``` |
| 42 | + |
| 43 | + |
| 44 | +### Lists |
| 45 | + |
| 46 | +You can create ordered and unordered lists: |
| 47 | + |
| 48 | +```markdown |
| 49 | +- Unordered List Item 1 |
| 50 | +- Unordered List Item 2 |
| 51 | + - Nested Unordered Item |
| 52 | +1. Ordered List Item 1 |
| 53 | +2. Ordered List Item 2 |
| 54 | + 1. Nested Ordered Item |
| 55 | +``` |
| 56 | + |
| 57 | +### Tables |
| 58 | + |
| 59 | +You can create tables using pipes and dashes: |
| 60 | + |
| 61 | +```markdown |
| 62 | +| Header 1 | Header 2 | |
| 63 | +|----------|----------| |
| 64 | +| Row 1 Col 1 | Row 1 Col 2 | |
| 65 | +| Row 2 Col 1 | Row 2 Col 2 | |
| 66 | +``` |
| 67 | + |
| 68 | +### Fenced Code Blocks |
| 69 | + |
| 70 | +Use triple backticks to create fenced code blocks: |
| 71 | + |
| 72 | +```python |
| 73 | +def hello_world(): |
| 74 | + print("Hello, World!") |
| 75 | +``` |
| 76 | + |
| 77 | +### Audio and Video |
| 78 | + |
| 79 | +You can embed audio and video files using the following syntax: |
| 80 | + |
| 81 | +```markdown |
| 82 | +<video controls> |
| 83 | + <source src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4" type="video/mp4"> |
| 84 | +</video> |
| 85 | +<audio controls> |
| 86 | + <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg"> |
| 87 | +</audio> |
| 88 | +``` |
| 89 | + |
| 90 | +## Advanced Markdown Features in Dify |
| 91 | + |
| 92 | +### Button & Links |
| 93 | + |
| 94 | +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. |
| 95 | + |
| 96 | +<img |
| 97 | + src="/images/screenshot-20250714-134035.png" |
| 98 | + className="mr-auto" |
| 99 | +/> |
| 100 | + |
| 101 | +You can use the following syntax to create buttons and links: |
| 102 | + |
| 103 | +``` |
| 104 | +<button data-message="Hello Dify" data-variant="primary">Hello Dify</button> |
| 105 | +<button data-message="Hello Dify" data-variant="danger">Hello Dify</button> |
| 106 | +``` |
| 107 | + |
| 108 | +For buttons, we need to define two attributes `data-variant` and `data-message`. |
| 109 | + |
| 110 | +- `data-variant`: The style of the button, can be `primary`, `secondary`, `warning`, `secondary-accent`, `ghost`, `ghost-accent`, `tertiary`. |
| 111 | +- `data-message`: The message that will be sent when the button is clicked. |
| 112 | + |
| 113 | +For links, it's more straightforward: |
| 114 | + |
| 115 | +``` |
| 116 | +<a href="https://dify.ai" target="_blank">Dify</a> |
| 117 | +``` |
| 118 | + |
| 119 | +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: |
| 120 | + |
| 121 | +``` |
| 122 | +[Special Link](abbr:special-link) |
| 123 | +``` |
| 124 | + |
| 125 | +### Form |
| 126 | + |
| 127 | +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. |
| 128 | + |
| 129 | +<img |
| 130 | + src="/images/screenshot-20250714-134150.png" |
| 131 | + className="mr-auto" |
| 132 | +/> |
| 133 | + |
| 134 | +#### Supported Input Types |
| 135 | + |
| 136 | +Dify supports a variety of input types for forms, including: |
| 137 | + |
| 138 | +- text |
| 139 | +- textarea |
| 140 | +- password |
| 141 | +- time |
| 142 | +- date |
| 143 | +- datetime |
| 144 | +- select |
| 145 | +- checkbox |
| 146 | +- hidden |
| 147 | + |
| 148 | +If you want to render a form during the conversation, you can use the following syntax: |
| 149 | + |
| 150 | +``` |
| 151 | +<form data-format="json"> // Default to text |
| 152 | + <label for="username">Username:</label> |
| 153 | + <input type="text" name="username" /> |
| 154 | + <label for="hidden_input">Hidden input:</label> |
| 155 | + <input type="hidden" name="hidden_input" value="hidden_value" /> |
| 156 | + <label for="password">Password:</label> |
| 157 | + <input type="password" name="password" /> |
| 158 | + <label for="content">Content:</label> |
| 159 | + <textarea name="content"></textarea> |
| 160 | + <label for="date">Date:</label> |
| 161 | + <input type="date" name="date" /> |
| 162 | + <label for="time">Time:</label> |
| 163 | + <input type="time" name="time" /> |
| 164 | + <label for="datetime">Datetime:</label> |
| 165 | + <input type="datetime" name="datetime" /> |
| 166 | + <label for="select">Select:</label> |
| 167 | + <input type="select" name="select" data-options='["hello","world"]'/> |
| 168 | + <input type="checkbox" name="check" data-tip="By checking this means you agreed"/> |
| 169 | + <button data-variant="primary">Login</button> |
| 170 | +</form> |
| 171 | +``` |
| 172 | + |
| 173 | +<Note> |
| 174 | + Hidden is not visible to users, you can set the value to pass data without user input. |
| 175 | +</Note> |
| 176 | + |
| 177 | +### Chart |
| 178 | + |
| 179 | +We support rendering [echarts](https://dify.ai/docs/guides/tools/chart) in markdown. You can use the following syntax to render a chart: |
| 180 | + |
| 181 | +<img |
| 182 | + src="/images/screenshot-20250714-134238.png" |
| 183 | + className="mr-auto" |
| 184 | +/> |
| 185 | + |
| 186 | +<Note> |
| 187 | + To render a chart, start a fenced code block with <code>\`\`\`echarts</code> and place your chart configuration inside. |
| 188 | +</Note> |
| 189 | + |
| 190 | +```echarts |
| 191 | +{ |
| 192 | + "title": { |
| 193 | + "text": "ECharts Entry Example" |
| 194 | + }, |
| 195 | + "tooltip": {}, |
| 196 | + "legend": { |
| 197 | + "data": ["Sales"] |
| 198 | + }, |
| 199 | + "xAxis": { |
| 200 | + "data": ["Shirts", "Cardigans", "Chiffons", "Pants", "Heels", "Socks"] |
| 201 | + }, |
| 202 | + "yAxis": {}, |
| 203 | + "series": [{ |
| 204 | + "name": "Sales", |
| 205 | + "type": "bar", |
| 206 | + "data": [5, 20, 36, 10, 10, 20] |
| 207 | + }] |
| 208 | +} |
| 209 | +``` |
| 210 | + |
| 211 | +### Music |
| 212 | + |
| 213 | +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: |
| 214 | + |
| 215 | +<img |
| 216 | + src="/images/screenshot-20250714-134431.png" |
| 217 | + className="mr-auto" |
| 218 | +/> |
| 219 | + |
| 220 | +<Note> |
| 221 | + To render a music sheet, start a fenced code block with <code>\`\`\`abc</code> and place your ABC notation inside. |
| 222 | +</Note> |
| 223 | + |
| 224 | +```abc |
| 225 | +X: 1 |
| 226 | +T: Cooley's |
| 227 | +M: 4/4 |
| 228 | +L: 1/8 |
| 229 | +K: Emin |
| 230 | +|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD| |
| 231 | +EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:| |
| 232 | +|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg| |
| 233 | +eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:| |
| 234 | +``` |
| 235 | + |
| 236 | +## Best Practices |
| 237 | + |
| 238 | +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. |
| 239 | + |
| 240 | +{/* |
| 241 | +Contributing Section |
| 242 | +DO NOT edit this section! |
| 243 | +It will be automatically generated by the script. |
| 244 | +*/} |
| 245 | + |
| 246 | +--- |
| 247 | + |
| 248 | +[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?title=Documentation%20Issue%3A%20ight-way-of-markd&body=%23%23%20Issue%20Description%0A%3C%21--%20Please%20briefly%20describe%20the%20issue%20you%20found%20--%3E%0A%0A%23%23%20Page%20Link%0Ahttps%3A%2F%2Fgithub.com%2Flanggenius%2Fdify-docs%2Fblob%2Fmain%2Fen/workshop/basic%2Fthe-right-way-of-markdown.mdx%0A%0A%23%23%20Suggested%20Changes%0A%3C%21--%20If%20you%20have%20specific%20suggestions%20for%20changes%2C%20please%20describe%20them%20here%20--%3E%0A%0A%3C%21--%20Thank%20you%20for%20helping%20improve%20our%20documentation%21%20--%3E) |
| 249 | + |
0 commit comments