How to import outside .md content?

183 Views Asked by At

Package

I use showdown.js to convert markdown to html and I successfully show the content which wrote inside the same file in chrome. Like this:

    <p id="output">test</p>
    <script>
        var converter = new showdown.Converter(),
            text = "# title",
            html = converter.makeHtml(text);
        document.getElementById('output').innerHTML = html;
    </script>

The outcome is this:

title

However when I want to show the content which wrote outside the same file. Like this:

<!DOCTYPE html>
<html>
<head>
    <title>MarkDown</title>
    <script src="dist/showdown.min.js"></script>
</head>

<body>
    <p id="content" class="hide">{{ blog.content }} </p>
    <p id="output">test</p>
    <script>
        var converter = new showdown.Converter(),
            text = document.getElementById('content').innerText,
            html = converter.makeHtml(text);
        document.getElementById('output').innerHTML = html;
    </script>

</body>
</html>

I just got:

{{ blog.content }}

{{ blog.content }}

Is anyone knows this simple question? How to insert outside content inside markdown?

1

There are 1 best solutions below

2
On

It seems that you are using a JS framework like React or Angular.

They parse the content inside the curly braces and replace it with the desired HTML.

The problem is that showdown.js is executed before your framework has time to render the content. Try to delay the markdown conversion until the content is rendered. There are different ways, depending on which framework you are using.