Markdown 文件的客戶端渲染

Question

可以按照標記庫文檔並內聯呈現 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 function 或通過任何其他客戶端Markdown 渲染庫並渲染整個文件而不僅僅是一個字符串？ 我研究了獲取 markdown 文件並將其作為字符串傳遞。 但是，我找不到直接的方法。

該文件與此 HTML 文件位於同一文件夾中，並將使用 GitHub 頁面從 GitHub 提供。 但是，如果需要，我可以使用來自 CDN 的絕對鏈接。 我如何將內容傳遞給marked.parse() ？ marked.parse(Hello.md)不起作用。

Answer 1

該文件與此 HTML 文件位於同一文件夾中，並將使用 GitHub 從 GitHub 提供

您可以讓瀏覽器fetch內容，然后將其內容傳遞給marked.parse() 。 像這樣的東西應該工作：

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script defer>
  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 ra text into marked.parse
      document.getElementById("content").innerHTML = marked.parse(markdown);
    });
</script>

這是一個活生生的例子。