or Create a profile

Home → Problems →

External HTML File

Carl's Avatar

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 1 Posted by Brett on 12 Nov, 2015 03:23 PM

    Brett's Avatar

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

    -Brett

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

    Carl's Avatar

    Here you go.

    <head>
      <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>
    </head>
    <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 3 Posted by Brett on 12 Nov, 2015 05:09 PM

    Brett's Avatar

    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. 4 Posted by Carl on 12 Nov, 2015 07:00 PM

    Carl's Avatar

    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 5 Posted by Brett on 12 Nov, 2015 07:47 PM

    Brett's Avatar

    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. 6 Posted by Carl on 12 Nov, 2015 08:05 PM

    Carl's Avatar

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

    Thanks

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

    Brett's Avatar

    Zip attached with JS, HTML, and Markdown.

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

    Carl's Avatar

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

    Thanks very much.

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

    Brett's Avatar

    Sure thing.

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

    Carl's Avatar

    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. 11 Posted by Carl on 12 Nov, 2015 10:59 PM

    Carl's Avatar

    The styling issue seems to affect Gant charts too.

    See attached.

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

    Carl's Avatar

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

Reply to this discussion

Internal reply

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

Attaching KB article:

»

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.

  • New Issue

  • Conversation Started

    A conversation has been started with the Marked staff to resolve this discussion.

  • Close the discussion

Private Permissions

This discussion is private. Only you and Marked support staff can see and reply to it.

Public Permissions

This discussion is public. Everyone can see and reply to it.

Keyboard shortcuts

Generic

? Show this help
ESC 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

10 Dec, 2024 08:59 PM formatting issues with .docx
30 Nov, 2024 09:09 PM If the document contains specific characters, the fonts become smaller when printed
26 Nov, 2024 05:18 PM KaTex does not render on mac Sequoia 15.0 (M2 chip)
26 Nov, 2024 01:58 PM changes in Scrivener editor will not show up in Marked 2
25 Nov, 2024 07:52 PM Can't find pandoc-crossref executable

Recent Articles

Intra-document links in exported PDFs
Using Ulysses with Marked
Fenced code blocks inside indented code blocks
Using JavaScript in Marked
Custom CSS: Writing custom CSS for Marked