Issue Summary
I’m trying to use mermaid.js to embed charts and class diagrams and finding that the content of a HTML tag is getting messed up after publishing. It works fine in preview.
Steps to Reproduce
- Use ghost’s code injection to install mermaid in site footer:
<script src="https://cdnjs.cloudflare.com/ajax/libs/mermaid/10.7.0/mermaid.min.js"></script>
<script>mermaid.initialize({startOnLoad:true});</script>
- Create a post with a HTML card and set the content to
<div class="mermaid">. See below for the actual content I’m using. - Preview the post and confirm the page is rendered correctly.
- Publish the post and note it doesn’t render correctly with mermaid complaining about syntax errors. View source shows the HTML card content is messed up. eg: errant
</]>before the closing div.
<div class="mermaid">
flowchart TD
if[if statement]
cond[<]
x[x]
y[y]
if --condition--> cond
cond --> x
cond --> y
if --trueblock--> true
true[codeblock] --statements--> meth1
if --falseblock--> false
false[codeblock] --statements--> retstmt
meth1[method call]
meth1--LHS-->id1
meth1--parameters-->p1
p1[expr literal 'less']
id1[identifier 'print']
retstmt[return] --value--> retval
retval[expr literal 0]
</div>
Setup information
Ghost Version
docker image ghost:latest (5+)
Ghost-CLI version: 1.25.3
Ghost version: 5.75.3 (at /var/lib/ghost)
Node.js Version
18.19
How did you install Ghost?
Latest docker image from dockerhub
Provide details of your host & operating system
Docker running on ubuntu, Linux
Database type
MySQL 8
Browser & OS version
N/A
Relevant log / error output
Here’s the corrupted output of the above HTML card: (note the weird tag just before the closing div)
<div class="mermaid">
flowchart TD
if[if statement]
cond[<] x[x] y[y] if --condition--> cond
cond --> x
cond --> y
if --trueblock--> true
true[codeblock] --statements--> meth1
if --falseblock--> false
false[codeblock] --statements--> retstmt
meth1[method call]
meth1--LHS-->id1
meth1--parameters-->p1
p1[expr literal 'less']
id1[identifier 'print']
retstmt[return] --value--> retval
retval[expr literal 0]
</]></div>
Example 2
Here’s a second, worse example where the rest of the post was cropped after the HTML tag.
(Again, this works fine in preview but is completely broken once published)
HTML Card Content:
<div class="mermaid">
classDiagram
class AstElement{
+CodePosition Position
}
AstElement <|-- AstStatement
AstElement <|-- AstExprNode
AstStatement <|-- all_statements
AstExprNode <|-- all_exprnodes
class all_statements["all statement types"]
class all_exprnodes["all expression nodes types"]
</div>
Published Content:
<div class="mermaid">
classDiagram
class AstElement{
+CodePosition Position
}
AstElement <|-- aststatement astelement <|-- astexprnode all_statements all_exprnodes class all_statements["all statement types"] all_exprnodes["all expression nodes < div>