bug of rendering a mermaid graph

[idealkindom]

Operating system

Windows

Joplin version

Joplin-Setup-3.0.13

Desktop version info

Joplin 3.0.13

Current behaviour

Joplin can not render a Mermaid graph well like this following piece of code:

sequenceDiagram
    autonumber
    participant 1 as $$\alpha$$
    participant 2 as $$\beta$$
    1->>2: Solve: $$\sqrt{2+2}$$
    2-->>1: Answer: $$2$$
    Note right of 2: $$\sqrt{2+2}=\sqrt{4}=2$$

Loading

Expected behaviour

It can be reproduced on Mermaid live to see the difference clear.

Logs

No response

[personalizedrefrigerator]

Explanation

This rendering issue seems to be an artifact caused by Joplin's rendering Mermaid diagrams within HTML <pre>s, which handle spaces differently from other elements. Previously, this was adjusted for by setting white-space to unset on the first element within a <pre> that wraps a Mermaid element. However, this doesn't seem to entirely fix the issue.

Workaround

For me, setting white-space to unset directly on the <pre> (rather than on the first child of it) seems to fix the issue.

To apply this change to an existing note, add the following to its markdown:

<style>
	/* All mermaid <pre> elements that have been rendered. */
	pre.mermaid[data-processed=true] { white-space: unset; }
</style>

It should also be possible to add the above CSS to userstyle.css.

Thank you for reporting this!

[idealkindom]

Explanation

This rendering issue seems to be an artifact caused by Joplin's rendering Mermaid diagrams within HTML \<pre\>s, which handle spaces differently from other elements. Previously, this was adjusted for by setting white-space to unset on the first element within a \<pre\> that wraps a Mermaid element. However, this doesn't seem to entirely fix the issue.

Workaround

For me, setting white-space to unset directly on the \<pre\> (rather than on the first child of it) seems to fix the issue.

To apply this change to an existing note, add the following to its markdown:

<style>
	/* All mermaid <pre> elements that have been rendered. */
	pre.mermaid[data-processed=true] { white-space: unset; }
</style>

It should also be possible to add the above CSS to userstyle.css.

Thank you for reporting this!

You R welcome to thank me. I tried the latest Joplin 3.1.4, it looks that this problem still persist in ver 3.1.4. The string of overall style setting works some how. However when I switch the editor mode I found the bug is still there. And when I try to download the graph in svg, some greek letters were lost. However, if I store the graph in png, it works well.

[personalizedrefrigerator]

I tried the latest Joplin 3.1.4, it looks that this problem still persist in ver 3.1.4.

The fix for this issue isn't present in v3.0.14. However, it should be available in the first 3.1.x pre-release when it is released (which should be in the near future).

[idealkindom]

Thks a lot for letting me know this. 在 2024-08-07 01:41:19，"Henry Heino" ***@***.***> 写道： I tried the latest Joplin 3.1.4, it looks that this problem still persist in ver 3.1.4. The fix for this issue isn't present in v3.0.14. However, it should be available in the first 3.1.x pre-release when it is released (which should be in the near future). — Reply to this email directly, view it on GitHub, or unsubscribe. You are receiving this because you authored the thread.Message ID: ***@***.***>