mirror of
https://github.com/langgenius/dify-docs.git
synced 2026-03-26 13:18:34 +07:00
feat: images
This commit is contained in:
crazywoola
170
en/workshop/basic/the-right-way-of-markdown.mdx
Normal file
170
en/workshop/basic/the-right-way-of-markdown.mdx
Normal file
@@ -0,0 +1,170 @@
|
||||
---
|
||||
title: The Right Way of Markdown
|
||||
---
|
||||
|
||||
> Author: Li Zheng, Dify DevRel
|
||||
|
||||
In this article, we will introduce the right way of using markdown in Dify. Markdown is a lightweight markup language that allows you to format text using simple syntax. It is widely used for writing documentation, articles, and other text-based content.
|
||||
|
||||
## Basic Markdown Syntax in Dify
|
||||
|
||||
We support most of the usage of markdown syntax, for example:
|
||||
|
||||
- Heading
|
||||
- Bold and Italic text, strike-through text
|
||||
- Lists
|
||||
- Table
|
||||
- Fenced Code Blocks
|
||||
|
||||
<Info>
|
||||
If you want to learn more about markdown syntax, you can refer to the [Markdown Guide](https://www.markdownguide.org/basic-syntax/), if you want to extend it's capabilities, you can also check out the [React Markdown](https://github.com/remarkjs/react-markdown).
|
||||
</Info>
|
||||
|
||||
## 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.
|
||||
Reference in New Issue
Block a user