Embed a URL for client-side rendering of a Markdown file

Question

One can render a Markdown file on a static site client-side using the code below.

<div id="txt"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
  fetch("https://raw.githubusercontent.com/ccharles/pages-test/master/markdown.md")
      .then(r=>r.blob()).then(b=>b.text()).then(m=>{document.getElementById("txt").innerHTML=marked.parse(m)})
</script>

I found there are two ways to embed a URL in another URL. However, I couldn't figure out how to pass the Markdown file URL as a parameter to the Marked.js URL. Can one add a Markdown file URL to the GET parameter of a library URL to render Markdown to HTML client side using this or any other library? Something like this..

https://cdn.jsdelivr.net/npm/marked/marked.min.js?MDUri=https://raw.githubusercontent.com/ccharles/pages-test/master/markdown.md

@chris

There is Docsify-This, for example docsify-this.net/?basePath=https://raw.githubusercontent.com/…. See docsify-this.net/# for documentation. — Marijn
– Marijn, Commented Jan 15, 2023 at 21:22
Yes, that works, @Marijn. Please post it as an answer. I'll use it if this can't be done with other popular libraries. — Ayan Mullick
– Ayan Mullick, Commented Jan 15, 2023 at 21:42
Your question is a resource request, which is off-topic (because the answers are invalidated when the resource is no longer available) so it's better not to post an answer I think. — Marijn
– Marijn, Commented Jan 15, 2023 at 21:47
I wish there were a browser flag for Markdown. Should I delete the question? — Ayan Mullick
– Ayan Mullick, Commented Jan 15, 2023 at 22:05

Ayan Mullick · Accepted Answer · 2023-12-19 19:46:22Z

One needs a domain to serve the code that would parse the Markdown file client side. One example of that is Docsify. PFB example

Published by Docsify-This

However, Docsify doesn't render the script tag in one's Markdown file. So one can serve code similar to snippet below and serve it from their own GitHub repository after enabling GitHub Pages.

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>

Example link

Collectives™ on Stack Overflow

Embed a URL for client-side rendering of a Markdown file

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related