Markdown 文件的客户端渲染

Question

人们可以按照Marked 库文档并内联渲染 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函数或通过任何其他客户端 Markdown 渲染库并渲染整个文件而不仅仅是字符串？我研究了获取 markdown 文件并将其作为字符串传递。但是，我找不到直接的方法。

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

Answer 1

该文件与此 HTML 文件位于同一文件夹中，并将使用 GitHub Pages 从 GitHub 提供服务

您可以让浏览器获取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>

这是一个活生生的例子。