# External HTML File

#### Carl

12 Nov, 2015 12:20 PM

Hi,

I'm using Marked 2.5.2 and the <<{graph.html} directive to render an external HTML file.

However, this seems to throw the following error in the console and the file is not rendered: -

[Error] Error: Parse error on line 1:
<svg id="mermaidChar
^
Expecting 'GRAPH', got 'TAGSTART'
parseError
parse
draw
init
(anonymous function)

Carl

1. Support Staff Posted by Brett on 12 Nov, 2015 03:23 PM

Can I see a copy of the HTML file you're including?

-Brett

2. Posted by Carl on 12 Nov, 2015 04:24 PM

Here you go.

<script src="http://cdnjs.cloudflare.com/ajax/libs/mermaid/0.5.1/mermaid.min.js"></script>
<title>mermaid example</title>
<script src="/Users/cbourne/Development/mermaid/mermaid.full.js"></script>
<body>
<div class="mermaid">
graph TD;
sq[Square shape]-->di{Diamond};
di-->A;
di-->B;
A-->C;
B-->C;
C-->ro2(Rounded square shape);
</div>
</body>

3. Support Staff Posted by Brett on 12 Nov, 2015 05:09 PM

First, you can't include a full html document, as Marked is going to insert it inside another full HTML document, breaking markup. Next, you appear to be including the script twice, and the CDN version will cause problems, especially in the MAS version of Marked where there are stricter security issues. Lastly, I can't tell if it's an escaping issue caused by pasting to Tender, but your initial script tag is broken with entity codes, so anything after it will be broken.

All you really need in the HTML file is:

<script src="/Users/cbourne/Development/mermaid/mermaid.js"></script>
<div class="mermaid">
graph TD;
sq[Square shape]-->di{Diamond};
di-->A;
di-->B;
A-->C;
B-->C;
C-->ro2(Rounded square shape);
</div>


This markup works fine for me when included with the curly bracket syntax you're using.

4. Posted by Carl on 12 Nov, 2015 07:00 PM

OK so this seems to work, nearly, however the rendered diagram seems to lose the arrows at the end of the lines. It works if I try it outside of Marked.

<div class="mermaid">
graph TD;
sq[Square shape]-->di{Diamond};
di-->A;
di-->B;
A-->C;
B-->C;
C-->ro2(Rounded square shape);
</div>
<script>
var diff = document.getElementById('firstdiff'); diff.parentNode.removeChild(diff);
</script>
<script src="/Users/cbourne/Development/mermaid/mermaid.full.js"></script>

5. Support Staff Posted by Brett on 12 Nov, 2015 07:47 PM

That snippet appears the same in Chrome and Safari as in Marked for me. Chrome on left, Marked on right:

I'm not able to troubleshoot Mermaid for you, unless you can pinpoint something that Marked is doing to the markup that a browser is not.

6. Posted by Carl on 12 Nov, 2015 08:05 PM

Hmm strange. Could you post your source for the graph and I'll see how it looks here.

Thanks

7. Support Staff Posted by Brett on 12 Nov, 2015 08:35 PM

Zip attached with JS, HTML, and Markdown.

8. Posted by Carl on 12 Nov, 2015 08:49 PM

OK, that did the trick. Think I must have been using an older version of mermaid.

Thanks very much.

9. Support Staff Posted by Brett on 12 Nov, 2015 09:16 PM

Sure thing.

10. Posted by Carl on 12 Nov, 2015 10:32 PM

So the only issue I seem to be having is what looks like some kind of style clash.

As can be seen when its included within Marked, Marked seems to interfere with the default styling.

Carl

11. Posted by Carl on 12 Nov, 2015 10:59 PM

The styling issue seems to affect Gant charts too.

See attached.

12. Posted by Carl on 12 Nov, 2015 11:39 PM

OK - Scratch that. It was me being dumb. There's no style-sheet by default.

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

### »

#### Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

# Keyboard shortcuts

### Generic

? Show this help Blurs the current field

### Comment Form

r Focus the comment reply box Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

## Recent Discussions

 13 Feb, 2020 09:22 PM Markdown Formatting 11 Feb, 2020 11:53 AM Custom themes not working 10 Feb, 2020 06:48 PM KaTex Preview Update 06 Feb, 2020 04:32 PM Using mermaid in Marked 2 29 Jan, 2020 12:45 AM MathJax rendering errors - Scrivener

## Recent Articles

 Using JavaScript in Marked Custom CSS: Writing custom CSS for Marked License code has already been utilized Highlight sentences longer than a certain number of words How do I retrieve a lost license (direct version)