The latest version of dify cannot properly render the formula of the markdown file. #6023

Closed
opened 2026-02-21 18:13:43 -05:00 by yindo · 3 comments
Owner

Originally created by @majestichou on GitHub (Oct 10, 2024).

Self Checks

  • This is only for bug report, if you would like to ask a question, please head to Discussions.
  • I have searched for existing issues search for existing issues, including closed ones.
  • I confirm that I am using English to submit this report (我已阅读并同意 Language Policy).
  • [FOR CHINESE USERS] 请务必使用英文提交 Issue,否则会被关闭。谢谢!:)
  • Please do not modify this template :) and fill in all the required fields.

Dify version

0.9.1

Cloud or Self Hosted

Cloud

Steps to reproduce

  1. Create app from importing DSL file and the content of DSL file is as follows:
app:
  description: ''
  icon: 🤖
  icon_background: '#FFEAD5'
  mode: advanced-chat
  name: test-md-formula
  use_icon_as_answer_icon: false
kind: app
version: 0.1.2
workflow:
  conversation_variables: []
  environment_variables: []
  features:
    file_upload:
      image:
        enabled: false
        number_limits: 3
        transfer_methods:
        - local_file
        - remote_url
    opening_statement: ''
    retriever_resource:
      enabled: true
    sensitive_word_avoidance:
      enabled: false
    speech_to_text:
      enabled: false
    suggested_questions: []
    suggested_questions_after_answer:
      enabled: false
    text_to_speech:
      enabled: false
      language: ''
      voice: ''
  graph:
    edges:
    - data:
        sourceType: start
        targetType: llm
      id: 1728613407510-llm
      source: '1728613407510'
      sourceHandle: source
      target: llm
      targetHandle: target
      type: custom
    - data:
        sourceType: llm
        targetType: answer
      id: llm-answer
      source: llm
      sourceHandle: source
      target: answer
      targetHandle: target
      type: custom
    nodes:
    - data:
        desc: ''
        selected: false
        title: 开始
        type: start
        variables: []
      height: 54
      id: '1728613407510'
      position:
        x: 80
        y: 282
      positionAbsolute:
        x: 80
        y: 282
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 244
    - data:
        context:
          enabled: false
          variable_selector: []
        desc: ''
        model:
          completion_params:
            max_tokens: 2000
            temperature: 0.1
            top_p: 0.3
          mode: chat
          name: qwen-turbo
          provider: tongyi
        prompt_template:
        - id: ba35722b-0880-4899-b4e2-c624e21370d9
          role: system
          text: 你的职责是根据用户的提示词完成用户指定的任务,或者回答用户的问题。
        - id: df10b603-a554-4829-8df6-fa135fe8c468
          role: user
          text: '{{#sys.query#}}'
        selected: false
        title: LLM
        type: llm
        variables: []
        vision:
          enabled: false
      height: 98
      id: llm
      position:
        x: 380
        y: 282
      positionAbsolute:
        x: 380
        y: 282
      selected: true
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 244
    - data:
        answer: '{{#llm.text#}}'
        desc: ''
        selected: false
        title: 直接回复
        type: answer
        variables: []
      height: 107
      id: answer
      position:
        x: 680
        y: 282
      positionAbsolute:
        x: 680
        y: 282
      sourcePosition: right
      targetPosition: left
      type: custom
      width: 244
    viewport:
      x: -150
      y: 113
      zoom: 1
  1. Enter the following information in the chat text box of the app:
What's the following formula?
$$1.5 , \text{m} \leq h_{UE} \leq 13.5 , \text{m}$$ 和 $$15 , \text{m} \leq h_{BS} \leq 35 , \text{m}$$
  1. The answer of the app is as follows:
The formulas you've provided define the range of acceptable heights for two entities, likely referring to an "UE" (User Equipment) and a "BS" (Base Station), in meters.

Specifically:

For the UE (User Equipment): The height $$h_{UE}$$ must be within the range from 1.5 meters to 13.5 meters.
For the BS (Base Station): The height $$h_{BS}$$ must be within the range from 15 meters to 35 meters.
These constraints could be relevant in scenarios such as wireless communication systems where the height of devices can affect signal strength and coverage.

image

In addition, I tried the 0.7.0 version of dify, deployed with docker.

image

As can be seen from the test above, the latest version of dify cannot properly render the formula of the markdown file.

✔️ Expected Behavior

The latest version of dify can properly render the formula of the markdown file.

Actual Behavior

The latest version of dify cannot properly render the formula of the markdown file.

Originally created by @majestichou on GitHub (Oct 10, 2024). ### Self Checks - [X] This is only for bug report, if you would like to ask a question, please head to [Discussions](https://github.com/langgenius/dify/discussions/categories/general). - [X] I have searched for existing issues [search for existing issues](https://github.com/langgenius/dify/issues), including closed ones. - [X] I confirm that I am using English to submit this report (我已阅读并同意 [Language Policy](https://github.com/langgenius/dify/issues/1542)). - [X] [FOR CHINESE USERS] 请务必使用英文提交 Issue,否则会被关闭。谢谢!:) - [X] Please do not modify this template :) and fill in all the required fields. ### Dify version 0.9.1 ### Cloud or Self Hosted Cloud ### Steps to reproduce 1. Create app from importing DSL file and the content of DSL file is as follows: ``` app: description: '' icon: 🤖 icon_background: '#FFEAD5' mode: advanced-chat name: test-md-formula use_icon_as_answer_icon: false kind: app version: 0.1.2 workflow: conversation_variables: [] environment_variables: [] features: file_upload: image: enabled: false number_limits: 3 transfer_methods: - local_file - remote_url opening_statement: '' retriever_resource: enabled: true sensitive_word_avoidance: enabled: false speech_to_text: enabled: false suggested_questions: [] suggested_questions_after_answer: enabled: false text_to_speech: enabled: false language: '' voice: '' graph: edges: - data: sourceType: start targetType: llm id: 1728613407510-llm source: '1728613407510' sourceHandle: source target: llm targetHandle: target type: custom - data: sourceType: llm targetType: answer id: llm-answer source: llm sourceHandle: source target: answer targetHandle: target type: custom nodes: - data: desc: '' selected: false title: 开始 type: start variables: [] height: 54 id: '1728613407510' position: x: 80 y: 282 positionAbsolute: x: 80 y: 282 sourcePosition: right targetPosition: left type: custom width: 244 - data: context: enabled: false variable_selector: [] desc: '' model: completion_params: max_tokens: 2000 temperature: 0.1 top_p: 0.3 mode: chat name: qwen-turbo provider: tongyi prompt_template: - id: ba35722b-0880-4899-b4e2-c624e21370d9 role: system text: 你的职责是根据用户的提示词完成用户指定的任务,或者回答用户的问题。 - id: df10b603-a554-4829-8df6-fa135fe8c468 role: user text: '{{#sys.query#}}' selected: false title: LLM type: llm variables: [] vision: enabled: false height: 98 id: llm position: x: 380 y: 282 positionAbsolute: x: 380 y: 282 selected: true sourcePosition: right targetPosition: left type: custom width: 244 - data: answer: '{{#llm.text#}}' desc: '' selected: false title: 直接回复 type: answer variables: [] height: 107 id: answer position: x: 680 y: 282 positionAbsolute: x: 680 y: 282 sourcePosition: right targetPosition: left type: custom width: 244 viewport: x: -150 y: 113 zoom: 1 ``` 2. Enter the following information in the chat text box of the app: ``` What's the following formula? $$1.5 , \text{m} \leq h_{UE} \leq 13.5 , \text{m}$$ 和 $$15 , \text{m} \leq h_{BS} \leq 35 , \text{m}$$ ``` 3. The answer of the app is as follows: ``` The formulas you've provided define the range of acceptable heights for two entities, likely referring to an "UE" (User Equipment) and a "BS" (Base Station), in meters. Specifically: For the UE (User Equipment): The height $$h_{UE}$$ must be within the range from 1.5 meters to 13.5 meters. For the BS (Base Station): The height $$h_{BS}$$ must be within the range from 15 meters to 35 meters. These constraints could be relevant in scenarios such as wireless communication systems where the height of devices can affect signal strength and coverage. ``` ![image](https://github.com/user-attachments/assets/1bf8f335-1143-41ae-bb86-2bf73088b33e) In addition, I tried the 0.7.0 version of dify, deployed with docker. ![image](https://github.com/user-attachments/assets/ccba6603-0fff-48b6-a424-9ad45e385557) As can be seen from the test above, the latest version of dify cannot properly render the formula of the markdown file. ### ✔️ Expected Behavior The latest version of dify can properly render the formula of the markdown file. ### ❌ Actual Behavior The latest version of dify cannot properly render the formula of the markdown file.
yindo added the 🐞 bug🙏 help wanted labels 2026-02-21 18:13:43 -05:00
yindo closed this issue 2026-02-21 18:13:43 -05:00
Author
Owner

@dosubot[bot] commented on GitHub (Oct 10, 2024):

There are some related discussions and issues regarding formula rendering in Dify:

  1. A similar unsolved discussion about integrating MathJax for rendering mathematical formulas in the Dify chat client [1].
  2. A closed issue requesting video playback and formula rendering in the front-end, but it was closed without a solution [2].

For rendering formulas, Dify uses remark-math and rehype-katex libraries. The configuration for these libraries in Dify is as follows:

<ReactMarkdown
  remarkPlugins={[[RemarkGfm, RemarkMath, { singleDollarTextMath: false }], RemarkBreaks]}
  rehypePlugins={[
    RehypeKatex,
    RehypeRaw as any,
    // Additional plugin logic
  ]}
>
  {latexContent}
</ReactMarkdown>

Ensure that these configurations are correctly set up in your environment. If the issue persists, it might be worth checking if there have been any changes or updates in the libraries or configurations between versions 0.7.0 and 0.9.1 that could affect rendering [3].

To continue talking to Dosu, mention @dosu.

@dosubot[bot] commented on GitHub (Oct 10, 2024): <!-- Answer --> There are some related discussions and issues regarding formula rendering in Dify: 1. A similar unsolved discussion about integrating MathJax for rendering mathematical formulas in the Dify chat client <sup>[[1]](https://github.com/langgenius/dify/discussions/8637)</sup>. 2. A closed issue requesting video playback and formula rendering in the front-end, but it was closed without a solution <sup>[[2]](https://github.com/langgenius/dify/issues/4337)</sup>. For rendering formulas, Dify uses `remark-math` and `rehype-katex` libraries. The configuration for these libraries in Dify is as follows: ```tsx <ReactMarkdown remarkPlugins={[[RemarkGfm, RemarkMath, { singleDollarTextMath: false }], RemarkBreaks]} rehypePlugins={[ RehypeKatex, RehypeRaw as any, // Additional plugin logic ]} > {latexContent} </ReactMarkdown> ``` Ensure that these configurations are correctly set up in your environment. If the issue persists, it might be worth checking if there have been any changes or updates in the libraries or configurations between versions 0.7.0 and 0.9.1 that could affect rendering <sup>[[3]](https://github.com/langgenius/dify/blob/main/web/app/components/base/markdown.tsx)</sup>. <!-- Dosu Comment Footer --> *To continue talking to [Dosu](https://dosu.dev), mention @dosu.*
Author
Owner

@majestichou commented on GitHub (Oct 17, 2024):

I found that the formula rendering of the latest version of dify (0.9.2) is slightly defective.
If the large model outputs the following formula:

[
D=\left\lceil \frac{2N_{R E}}{N_{M A X}}\right\rceil,
]

the dify web page cannot be output normally.
image

If the large model outputs the following formula:

D=\left\lceil \frac{2N_{R E}}{N_{M A X}}\right\rceil,

the dify web page can output normally.
image

@majestichou commented on GitHub (Oct 17, 2024): I found that the formula rendering of the latest version of dify (0.9.2) is slightly defective. If the large model outputs the following formula: [ D=\left\lceil \frac{2N_{R E}}{N_{M A X}}\right\rceil, ] the dify web page cannot be output normally. ![image](https://github.com/user-attachments/assets/2b6f3ded-0962-45ea-9647-d1566b37b833) If the large model outputs the following formula: D=\left\lceil \frac{2N_{R E}}{N_{M A X}}\right\rceil, the dify web page can output normally. ![image](https://github.com/user-attachments/assets/dfdde9ea-c39d-484f-aaa0-9c85741bf898)
Author
Owner

@majestichou commented on GitHub (Oct 17, 2024):

@crazywoola @likenamehaojie

@majestichou commented on GitHub (Oct 17, 2024): @crazywoola @likenamehaojie
Sign in to join this conversation.
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#6023