Merge pull request #321 from langgenius/pages/the-right-way-of-markdown

2026-03-27 13:28:32 +07:00 · 2025-07-14 16:55:24 +08:00
parent 85f7a55d91 cbef29f704
commit 364bf2d22a
12 changed files with 775 additions and 3 deletions
--- a/docs.json
+++ b/docs.json
@@ -252,7 +252,8 @@
                                    {
                                        "group": "Basic",
                                        "pages": [
-                                            "en/workshop/basic/build-ai-image-generation-app"
+                                            "en/workshop/basic/build-ai-image-generation-app",
+                                            "en/workshop/basic/the-right-way-of-markdown"
                                        ]
                                    },
                                    {
@@ -909,7 +910,8 @@
                                        "group": "初级",
                                        "pages": [
                                            "zh-hans/workshop/basic/build-ai-image-generation-app",
-                                            "zh-hans/workshop/basic/travel-assistant"
+                                            "zh-hans/workshop/basic/travel-assistant",
+                                            "zh-hans/workshop/basic/the-right-way-of-markdown"
                                        ]
                                    },
                                    {
@@ -1549,7 +1551,8 @@
                                        "pages": [
                                            "ja-jp/workshop/basic/README",
                                            "ja-jp/workshop/basic/build-ai-image-generation-app",
-                                            "ja-jp/workshop/basic/travel-assistant"
+                                            "ja-jp/workshop/basic/travel-assistant",
+                                            "ja-jp/workshop/basic/the-right-way-of-markdown"
                                        ]
                                    },
                                    {
--- a/en/getting-started/install-self-hosted/environments.mdx
+++ b/en/getting-started/install-self-hosted/environments.mdx
@@ -717,3 +717,4 @@ It will be automatically generated by the script.
 ---

 [Edit this page](https://github.com/langgenius/dify-docs/edit/main/en/getting-started/install-self-hosted/environments.mdx) | [Report an issue](https://github.com/langgenius/dify-docs/issues/new?title=Documentation%20Issue%3A%20onme&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/getting-started/install-self-hosted%2Fenvironments.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)
+
--- a/en/getting-started/install-self-hosted/faqs.mdx
+++ b/en/getting-started/install-self-hosted/faqs.mdx
@@ -135,3 +135,13 @@ Make sure to back up your existing data before upgrading. Refer to [Question 8](

 [Edit this page](https://github.com/langgenius/dify-docs/edit/main/en/getting-started/install-self-hosted/faqs.mdx) | [Report an issue](https://github.com/langgenius/dify-docs/issues/new?title=Documentation%20Issue%3A%20&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/getting-started/install-self-hosted%2Ffaqs.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)

+{/*
+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/getting-started/install-self-hosted/faqs.mdx) | [Report an issue](https://github.com/langgenius/dify-docs/issues/new?title=Documentation%20Issue%3A%20&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/getting-started/install-self-hosted%2Ffaqs.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)
+
--- a/en/workshop/basic/the-right-way-of-markdown.mdx
+++ b/en/workshop/basic/the-right-way-of-markdown.mdx
@@ -0,0 +1,249 @@
+---
+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?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)
+
--- a/images/CleanShot2025-07-14at00.34.54.png
+++ b/images/CleanShot2025-07-14at00.34.54.png
--- a/images/image.png
+++ b/images/image.png
--- a/images/screenshot-20250714-134035.png
+++ b/images/screenshot-20250714-134035.png
--- a/images/screenshot-20250714-134150.png
+++ b/images/screenshot-20250714-134150.png
--- a/images/screenshot-20250714-134238.png
+++ b/images/screenshot-20250714-134238.png
--- a/images/screenshot-20250714-134431.png
+++ b/images/screenshot-20250714-134431.png
--- a/ja-jp/workshop/basic/the-right-way-of-markdown.mdx
+++ b/ja-jp/workshop/basic/the-right-way-of-markdown.mdx
@@ -0,0 +1,250 @@
+---
+title: Markdown の正しい使い方
+---
+
+[Markdown](https://www.markdownguide.org/basic-syntax/) は、Dify アプリの出力をプレーンテキストから、適切に整形されたプロフェッショナルなレスポンスに変換することができます。Answer や End ノードで Markdown を使うことで、見出し・リスト・コードブロック・表などをレンダリングし、エンドユーザーにとって分かりやすい視覚的階層を構築できます。
+
+## Dify における基本的な Markdown 構文
+
+Answer / End ノード内で以下のような要素を Markdown で描画できます：
+
+* 見出し
+* 太字、斜体、取り消し線
+* リスト
+* 表
+* 複数行のコードブロック
+* オーディオとビデオ
+
+<img
+  src="/images/CleanShot2025-07-14at00.34.54.png"
+  className="mr-auto"
+/>
+
+### 見出し
+
+`#` を使って見出しを作成します。`#` の数が見出しの階層を表します：
+
+```markdown
+# 見出し 1
+## 見出し 2
+### 見出し 3
+```
+
+### 太字・斜体・取り消し線
+
+以下のような構文でテキストのスタイルを変更できます：
+
+```markdown
+**太字テキスト**
+*斜体テキスト*
+~~取り消し線テキスト~~
+```
+
+### リスト
+
+順序付きおよび順序なしリストを作成できます：
+
+```markdown
+- 順序なし項目 1
+- 順序なし項目 2
+  - ネストされた項目
+1. 順序付き項目 1
+2. 順序付き項目 2
+   1. ネストされた項目
+```
+
+### 表
+
+パイプ（|）とハイフン（-）を使って表を作成します：
+
+```markdown
+| ヘッダー 1 | ヘッダー 2 |
+|------------|------------|
+| 行 1 列 1  | 行 1 列 2  |
+| 行 2 列 1  | 行 2 列 2  |
+```
+
+### 複数行のコードブロック
+
+3つのバッククォート（\`\`\`）を使ってコードブロックを作成します：
+
+```python
+def hello_world():
+    print("Hello, World!")
+```
+
+### オーディオとビデオ
+
+以下の構文を使用して、音声および動画を埋め込むことができます：
+
+```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>
+```
+
+<Note>
+Markdown の使い方についてさらに詳しく知りたい場合は、[Markdown Guide](https://www.markdownguide.org/basic-syntax/) をご参照ください。
+</Note>
+
+---
+
+## Dify における高度な Markdown 機能
+
+### ボタンとリンク
+
+LLM が自動生成したフォローアップ質問が不満な場合、Markdown のボタンやリンクを使って会話の流れをコントロールすることができます。
+
+<img src="/images/screenshot-20250714-134035.png" className="mr-auto"/>
+
+以下の構文でボタンとリンクを作成できます：
+
+```
+<button data-message="Hello Dify" data-variant="primary">Hello Dify</button>
+<button data-message="Hello Dify" data-variant="danger">Hello Dify</button>
+```
+
+ボタンには次の2つの属性が必要です：
+
+* `data-variant`: ボタンのスタイル。`primary`、`secondary`、`warning`、`secondary-accent`、`ghost`、`ghost-accent`、`tertiary` など
+* `data-message`: ボタンがクリックされたときに送信されるメッセージ
+
+リンクの構文はよりシンプルです：
+
+```
+<a href="https://dify.ai" target="_blank">Dify</a>
+```
+
+会話内で特定のアクションをトリガーする省略リンク (`abbr`) も使えます：
+
+```
+[特別リンク](abbr:special-link)
+```
+
+---
+
+### フォーム（Form）
+
+フォームを使用する際には `data-format` 属性を設定する必要があります。`json` または `text` を指定でき、デフォルトは `text` です。`data-format="json"` に設定すると JSON 形式で送信されます。
+
+<img src="/images/screenshot-20250714-134150.png" className="mr-auto"/>
+
+#### サポートされている入力タイプ
+
+Dify では以下の入力タイプをフォームで利用できます：
+
+* text（テキスト）
+* textarea（複数行テキスト）
+* password（パスワード）
+* time（時間）
+* date（日付）
+* datetime（日付と時間）
+* select（セレクトボックス）
+* checkbox（チェックボックス）
+* hidden（非表示フィールド）
+
+以下のような構文で会話中にフォームを描画できます：
+
+```
+<form data-format="json"> // デフォルトは text
+  <label for="username">ユーザー名：</label>
+  <input type="text" name="username" />
+  <label for="hidden_input">非表示項目：</label>
+  <input type="hidden" name="hidden_input" value="hidden_value" />
+  <label for="password">パスワード：</label>
+  <input type="password" name="password" />
+  <label for="content">内容：</label>
+  <textarea name="content"></textarea>
+  <label for="date">日付：</label>
+  <input type="date" name="date" />
+  <label for="time">時間：</label>
+  <input type="time" name="time" />
+  <label for="datetime">日時：</label>
+  <input type="datetime" name="datetime" />
+  <label for="select">選択：</label>
+  <input type="select" name="select" data-options='["hello","world"]'/>
+  <input type="checkbox" name="check" data-tip="チェックすることで同意と見なされます"/>
+  <button data-variant="primary">ログイン</button>
+</form>
+```
+
+<Note>
+  `hidden` タイプの入力はユーザーに表示されず、ユーザーの操作なしにデータを渡すのに使用されます。
+</Note>
+
+---
+
+### グラフ（Chart）
+
+Markdown 内で [echarts](https://dify.ai/docs/guides/tools/chart) を使ってグラフを描画できます。以下のような構文を使用します：
+
+<img src="/images/screenshot-20250714-134238.png" className="mr-auto"/>
+
+<Note>
+  グラフを描画するには、<code>\`\`\`echarts</code> でコードブロックを開始し、その中に設定を記述してください。
+</Note>
+
+```echarts
+{
+  "title": {
+    "text": "ECharts 入門例"
+  },
+  "tooltip": {},
+  "legend": {
+    "data": ["売上"]
+  },
+  "xAxis": {
+    "data": ["シャツ", "カーディガン", "シフォン", "ズボン", "ヒール", "靴下"]
+  },
+  "yAxis": {},
+  "series": [{
+    "name": "売上",
+    "type": "bar",
+    "data": [5, 20, 36, 10, 10, 20]
+  }]
+}
+```
+
+---
+
+### 音楽（譜面）
+
+Markdown では譜面も描画できます。[ABC 記譜法](https://paulrosen.github.io/abcjs/) に対応しており、以下のような構文で利用します：
+
+<img src="/images/screenshot-20250714-134431.png" className="mr-auto"/>
+
+<Note>
+  譜面を描画するには、<code>\`\`\`abc</code> でコードブロックを開始し、ABC 記譜内容を記述してください。
+</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:|
+```
+
+---
+
+## ベストプラクティス
+
+Markdown コンテンツを事前に定義しておきたい場合は、Dify の [テンプレート機能](/en/guides/workflow/node/template) を活用しましょう。これにより、下流のノードでもテンプレート内容を再利用でき、効率と一貫性を高めることができます。
+
+{/*
+Contributing Section
+DO NOT edit this section!
+It will be automatically generated by the script.
+*/}
+
+---
+
+[このページを編集する](https://github.com/langgenius/dify-docs/edit/main/ja-jp/workshop/basic/the-right-way-of-markdown.mdx) | [問題を報告する](https://github.com/langgenius/dify-docs/issues/new?title=ドキュメントの問題%3A%20ight-way-of-markd&body=%23%23%20問題の説明%0A%3C%21--%20発見した問題について簡単に説明してください%20--%3E%0A%0A%23%23%20ページリンク%0Ahttps%3A%2F%2Fgithub.com%2Flanggenius%2Fdify-docs%2Fblob%2Fmain%2Fja-jp/workshop/basic%2Fthe-right-way-of-markdown.mdx%0A%0A%23%23%20提案される変更%0A%3C%21--%20特定の変更案がある場合は、ここで説明してください%20--%3E%0A%0A%3C%21--%20ドキュメントの品質向上にご協力いただきありがとうございます！%20--%3E)
+
--- a/zh-hans/workshop/basic/the-right-way-of-markdown.mdx
+++ b/zh-hans/workshop/basic/the-right-way-of-markdown.mdx
@@ -0,0 +1,259 @@
+---
+title: Markdown 的正确使用方式
+---
+
+[Markdown](https://www.markdownguide.org/basic-syntax/) 可以将你在 Dify 应用中的输出从纯文本转化为格式良好、专业美观的响应内容。在 Answer 和 End 节点中使用 Markdown，可以渲染标题、列表、代码块、表格等元素，为终端用户创造清晰的视觉层次结构。
+
+## Dify 中的基本 Markdown 语法
+
+你可以在 Answer / End 节点中使用 Markdown 渲染以下内容：
+
+* 标题
+* 加粗、斜体、删除线
+* 列表
+* 表格
+* 多行代码块
+* 音频和视频
+
+<img
+  src="/images/CleanShot2025-07-14at00.34.54.png"
+  className="mr-auto"
+/>
+
+### 标题
+
+使用 `#` 来表示标题，`#` 的数量表示标题级别：
+
+```markdown
+# 一级标题
+## 二级标题
+### 三级标题
+```
+
+### 加粗、斜体、删除线
+
+你可以使用以下方式设置文本样式：
+
+```markdown
+**加粗文本**
+*斜体文本*
+~~删除线文本~~
+```
+
+### 列表
+
+可以创建有序和无序列表：
+
+```markdown
+- 无序列表项 1
+- 无序列表项 2
+  - 嵌套无序项
+1. 有序列表项 1
+2. 有序列表项 2
+   1. 嵌套有序项
+```
+
+### 表格
+
+使用竖线和短横线创建表格：
+
+```markdown
+| 表头 1 | 表头 2 |
+|--------|--------|
+| 第 1 行第 1 列 | 第 1 行第 2 列 |
+| 第 2 行第 1 列 | 第 2 行第 2 列 |
+```
+
+### 多行代码块
+
+使用三个反引号 <code>\`\`\`python</code> 创建多行代码块：
+
+```python
+def hello_world():
+    print("Hello, World!")
+```
+
+### 音频和视频
+
+可以通过以下语法插入音频和视频：
+
+```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>
+```
+<Note>
+  如果你希望了解更多关于 Markdown 的使用方式，可以参考 [Markdown Guide](https://www.markdownguide.org/basic-syntax/)。
+</Note>
+
+## Dify 中的高级 Markdown 功能
+
+### 按钮和链接
+
+你可能不喜欢默认由大模型生成的后续问题，此时你可以使用按钮和链接，引导对话朝特定方向发展。
+
+<img
+src="/images/screenshot-20250714-134035.png"
+className="mr-auto"
+/>
+
+你可以使用以下语法创建按钮和链接：
+
+```
+<button data-message="Hello Dify" data-variant="primary">Hello Dify</button>
+<button data-message="Hello Dify" data-variant="danger">Hello Dify</button>
+```
+
+按钮需要定义两个属性：
+
+* `data-variant`：按钮样式，可选值包括 `primary`、`secondary`、`warning`、`secondary-accent`、`ghost`、`ghost-accent`、`tertiary`
+* `data-message`：点击按钮时发送的消息内容
+
+链接的用法更为简单：
+
+```
+<a href="https://dify.ai" target="_blank">Dify</a>
+```
+
+你也可以使用 `abbr` 语法创建交互链接，用于对话中触发特定交互：
+
+```
+[特殊链接](abbr:special-link)
+```
+
+---
+
+### 表单（Form）
+
+表单需要设置 `data-format` 属性，支持 `json` 和 `text` 两种格式，默认是 `text`。当设置为 `data-format="json"` 时，表单会以 JSON 对象提交。
+
+<img
+src="/images/screenshot-20250714-134150.png"
+className="mr-auto"
+/>
+
+#### 支持的输入类型
+
+Dify 支持多种表单输入类型：
+
+* text（文本）
+* textarea（多行文本）
+* password（密码）
+* time（时间）
+* date（日期）
+* datetime（日期时间）
+* select（下拉选择）
+* checkbox（复选框）
+* hidden（隐藏字段）
+
+如果你想在对话中渲染一个表单，可以使用如下语法：
+
+```
+<form data-format="json"> // 默认为 text
+  <label for="username">用户名：</label>
+  <input type="text" name="username" />
+  <label for="hidden_input">隐藏字段：</label>
+  <input type="hidden" name="hidden_input" value="hidden_value" />
+  <label for="password">密码：</label>
+  <input type="password" name="password" />
+  <label for="content">内容：</label>
+  <textarea name="content"></textarea>
+  <label for="date">日期：</label>
+  <input type="date" name="date" />
+  <label for="time">时间：</label>
+  <input type="time" name="time" />
+  <label for="datetime">日期时间：</label>
+  <input type="datetime" name="datetime" />
+  <label for="select">选择：</label>
+  <input type="select" name="select" data-options='["hello","world"]'/>
+  <input type="checkbox" name="check" data-tip="勾选表示你已同意"/>
+  <button data-variant="primary">登录</button>
+</form>
+```
+
+<Note>
+  Hidden 隐藏字段不会显示给用户，可以用来在不经用户输入的情况下传递数据。
+</Note>
+
+---
+
+### 图表（Chart）
+
+你可以在 Markdown 中使用 [echarts](https://dify.ai/docs/guides/tools/chart) 渲染图表。语法如下：
+
+<img
+src="/images/screenshot-20250714-134238.png"
+className="mr-auto"
+/>
+
+<Note>
+  要渲染图表，使用以 <code>\`\`\`echarts</code> 开头的代码块，并将配置写入其中。
+</Note>
+
+```echarts
+{
+  "title": {
+    "text": "ECharts 入门示例"
+  },
+  "tooltip": {},
+  "legend": {
+    "data": ["销量"]
+  },
+  "xAxis": {
+    "data": ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
+  },
+  "yAxis": {},
+  "series": [{
+    "name": "销量",
+    "type": "bar",
+    "data": [5, 20, 36, 10, 10, 20]
+  }]
+}
+```
+
+---
+
+### 音乐（乐谱）
+
+除了图表，你还可以在 Markdown 中渲染乐谱。我们支持 [ABC notation](https://paulrosen.github.io/abcjs/) 乐谱标准，使用以下语法：
+
+<img
+src="/images/screenshot-20250714-134431.png"
+className="mr-auto"
+/>
+
+<Note>
+  要渲染乐谱，使用以 <code>\`\`\`abc</code> 开头的代码块，并将 ABC 记谱内容写入其中。
+</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:|
+```
+
+---
+
+## 最佳实践
+
+如果你希望提前定义 Markdown 内容，可以使用 Dify 的 [模板功能](/en/guides/workflow/node/template)。这可以让你在后续节点中复用模板内容，提高效率与一致性。
+
+{/*
+Contributing Section
+DO NOT edit this section!
+It will be automatically generated by the script.
+*/}
+
+---
+
+[编辑此页面](https://github.com/langgenius/dify-docs/edit/main/zh-hans/workshop/basic/the-right-way-of-markdown.mdx) | [提交问题](https://github.com/langgenius/dify-docs/issues/new?title=文档问题%3A%20ight-way-of-markd&body=%23%23%20问题描述%0A%3C%21--%20请简要描述您发现的问题%20--%3E%0A%0A%23%23%20页面链接%0Ahttps%3A%2F%2Fgithub.com%2Flanggenius%2Fdify-docs%2Fblob%2Fmain%2Fzh-hans/workshop/basic%2Fthe-right-way-of-markdown.mdx%0A%0A%23%23%20建议修改%0A%3C%21--%20如果有具体的修改建议，请在此说明%20--%3E%0A%0A%3C%21--%20感谢您对文档质量的关注！%20--%3E)
+