tag:support.markedapp.com,2011-09-11:/discussions/problems/106381-external-html-fileMarked: Discussion 2015-11-12T23:39:42Ztag:support.markedapp.com,2011-09-11:Comment/384451182015-11-12T15:23:04Z2015-11-12T15:23:04ZExternal HTML File<div><p>Can I see a copy of the HTML file you're including?</p>
<p>-Brett</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/384451182015-11-12T16:24:33Z2015-11-12T16:24:34ZExternal HTML File<div><p>Here you go.</p>
<br>
<br>
<br>
<div class="mermaid">graph TD; sq[Square shape]-->di{Diamond};
di-->A; di-->B; A-->C; B-->C; C-->ro2(Rounded square
shape);</div></div>Carltag:support.markedapp.com,2011-09-11:Comment/384451182015-11-12T17:09:46Z2015-11-12T17:09:46ZExternal HTML File<div><p>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.</p>
<p>All you really need in the HTML file is:</p>
<pre>
<code><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></code>
</pre>
<p>This markup works fine for me when included with the curly
bracket syntax you're using.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/384451182015-11-12T19:00:43Z2015-11-12T19:00:45ZExternal HTML File<div><p>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.<br></p>
<pre>
<code><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></code>
</pre></div>Carltag:support.markedapp.com,2011-09-11:Comment/384451182015-11-12T19:47:12Z2015-11-12T19:47:12ZExternal HTML File<div><p>That snippet appears the same in Chrome and Safari as in Marked
for me. Chrome on left, Marked on right:</p>
<p><img alt="" src="http://ckyp.us/gdyP+"></p>
<p>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.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/384451182015-11-12T20:05:50Z2015-11-12T20:05:51ZExternal HTML File<div><p>Hmm strange. Could you post your source for the graph and I'll
see how it looks here.</p>
<p>Thanks</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/384451182015-11-12T20:35:05Z2015-11-12T20:35:05ZExternal HTML File<div><p>Zip attached with JS, HTML, and Markdown.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/384451182015-11-12T20:49:32Z2015-11-12T20:49:33ZExternal HTML File<div><p>OK, that did the trick. Think I must have been using an older
version of mermaid.</p>
<p>Thanks very much.</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/384451182015-11-12T21:16:22Z2015-11-12T21:16:22ZExternal HTML File<div><p>Sure thing.</p></div>Bretttag:support.markedapp.com,2011-09-11:Comment/384451182015-11-12T22:32:59Z2015-11-12T22:33:01ZExternal HTML File<div><p>So the only issue I seem to be having is what looks like some
kind of style clash.</p>
<p>As can be seen when its included within Marked, Marked seems to
interfere with the default styling.</p>
<p>Carl</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/384451182015-11-12T22:59:53Z2015-11-12T22:59:56ZExternal HTML File<div><p>The styling issue seems to affect Gant charts too.</p>
<p>See attached.</p></div>Carltag:support.markedapp.com,2011-09-11:Comment/384451182015-11-12T23:39:40Z2015-11-12T23:39:42ZExternal HTML File<div><p>OK - Scratch that. It was me being dumb. There's no style-sheet
by default.</p></div>Carl