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)无效。

- Ayan Mullick

---

文件从哪里来？客户端JavaScript没有任何访问用户文件系统的方式。如果文件通过HTTP或类似方式可用，只需检索它并将其内容传递到marked.parse()中。 - Chris

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

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>

这里有一个实时例子。

- Chris