Markdown 文件的客户端渲染

发布于 2025-01-14 05:56:51 字数 1017 浏览 3 评论 0原文

人们可以按照标记库文档并内联渲染 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) 不起作用。

原文

One can follow the Marked library documentation and render a Markdown string inline. This is a working code snippet.

<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>

Is there a way to pass a file into the marked.parse function or through 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.

The file is in the same folder as this HTML file and would be served from GitHub using GitHub Pages. However, I could use an absolute link from a CDN if needed. How would I pass the contents to marked.parse()? marked.parse(Hello.md) didn't work.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

爱的十字路口 2025-01-21 05:56:51

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

您可以使用浏览器 获取内容，然后将其内容传递给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>

这是一个实例。

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

You can have the browser fetch the content and then pass its content to marked.parse(). Something like this should work:

<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.

回复收藏 0 原文

~没有更多了~