markdown - Markdown 文件的客户端渲染

Question

可以关注Marked library documentation并内联渲染一个 Markdown 字符串。这是一个有效的代码片段。

<div id="content"></div>
  <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
  <script>
    document.getElementById('content').innerHTML =
      marked.parse('# Hello Ayan \n\nRendered by **marked**.');
  </script>

有没有办法将文件传递给marked.parse函数或通过any other client-side Markdown rendering library传递？并呈现整个文件 而不仅仅是一个字符串？我研究了获取 Markdown 文件并将其作为字符串传递。然而，我couldn't find a straightforward way .

该文件与此 HTML 文件位于同一文件夹中，将使用 GitHub Pages 从 GitHub 提供。但是，如果需要，我可以使用来自 CDN 的绝对链接。我如何将内容传递给 marked.parse()？ marked.parse(Hello.md) 无效。

Answer 1

The file is in the same folder as this HTML file and would be served from GitHub using GitHub Pages

你可以有浏览器fetch内容，然后将其内容传递给 marked.parse()。这样的事情应该有效:

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
  fetch("/pages-site/markdown.md")      // The path to the raw Markdown file
    .then(response => response.blob())  // Unwrap to a blob...
    .then(blob => blob.text())          // ...then to raw text...
    .then(markdown => {                 // ...then pass the raw text into marked.parse
      document.getElementById("content").innerHTML = marked.parse(markdown);
    });
</script>

Here is a live example .