CODEWITHSUNDEEP
markdownclient-sidegisthtml-renderingjavascript-marked
Ayan Mullick
Ayan Mullick

Reputation: 162

Display GitHub Gist while rendering Markdown client-side

How can one display the contents of a GitHub Gist while parsing a markdown file client-side using Marked.js or with any other client Markdown library? The code below renders the Markdown file except the Gist.

fetch("https://raw.githubusercontent.com/Ayanmullick/test/master/testfolder/StachExgMdScript.md")
    .then(response => response.blob())  // Unwrap to a blob...
    .then(blob => blob.text())          // ...then to raw text...
    .then(markdown => {        // .pass raw text into marked.parse
document.getElementById("content").innerHTML=marked.parse(markdown)
    })
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<div id="content"></div>

However, the Gist renders OK in Visual Studio Code after disabling Markdown content preview settings : Disable preview security warning in this workspace.

enter image description here

Upvotes: 3

Views: 316

Answers (2)

Ayan Mullick
Ayan Mullick

Reputation: 162

One needs additional JavaScript to run the script tag while rendering Markdown client side.

document.addEventListener("DOMContentLoaded", function() {
    fetch("https://raw.githubusercontent.com/Ayanmullick/test/master/testfolder/StachExgMdScript.md")
        .then((response) => response.text()) // Unwrap to a blob...
        .then((markdown) => {
            document.getElementById("content").innerHTML = marked.parse(markdown);
            var scriptTags = document.querySelectorAll("#content script");
            function handleDocumentWrite(content) {
                var contentPlaceholder = document.getElementById("content");
                contentPlaceholder.innerHTML += content}
            window.document.write = handleDocumentWrite;
            scriptTags.forEach(function(scriptTag) {
                if (scriptTag.src) {
                    var externalScript = document.createElement("script");
                    externalScript.src = scriptTag.src;
                    document.getElementById("content").appendChild(externalScript);
                } else {eval(scriptTag.innerText); }
            });
        });
});
<div id="content"></div>
 <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

Upvotes: 0

mushahidq
mushahidq

Reputation: 96

This might be occurring because Marked.js is not executing the script in the parsed markdown file. I'm not sure which libraries would allow you to do this but according to this you might be able to do this in Docsify-JS https://gist.github.com/MichaelCurrin/c2bece08f27c4277001f123898d16a7c

You need to enable this executescript:true in order to run the inline scripts https://docsify.js.org/#/configuration?id=executescript

Upvotes: 0

Related Questions