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 and render the whole file instead of just a string? I looked into getting the markdown file and passing it as a string. However, I couldn't find a straightforward way.

该文件与此 HTML 文件位于同一文件夹中，将使用 GitHub 页面从 GitHub 提供。但是，如果需要，我可以使用来自 CDN 的绝对 link。我如何将内容传递给 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.

Markdown 文件的客户端渲染

Client-side rendering of a Markdown file

markdown

client-side

html-rendering

javascript-marked