Brett on 14 Jan, 2015 04:43 PM
The two issues you'll run into are typographic processing taking
over within the diagram and converting things like
--> to —>, and the #firstdiff
element that is used to mark the latest change, which will show up
inside the diagram div when you're editing within it.
The first issue can be solved by turning off "Generate
typographically correct..." in the Style preferences, or by just
using the Discount (GFM) processor, which shouldn't run
SmartyPants. If you're using a custom processor, you may have some
luck adding "markdown=0" to the attributes on the .mermaid div,
which in many cases prevents any Markdown processing within that
particular block element.
The second issue is more complicated because Marked generates
the diff element even if you've disabled scroll to edit. In order
to have the diagram render properly while editing within it, you
need to remove the diff marker manually. The following code is
working for me:
Brett on 27 Sep, 2018 01:32 PM
I got it to work by turning off Smart Typography in Preferences->Style->Generate typographically correct quotes and punctuation. You can also do it by using a fenced code block (see below) instead of a paragraph, but only if you turn off Syntax Highlighting in Style preferences.
Alice->John: Hello Johns, how are you?
John->John: Fight against hypochondria
Note right of John: Rational thoughts <br/>prevail...
John->Bob: How about you?
Bob-->John: Jolly good!
I may work on a better solution for this, but that's what I've got right now.