【问题标题】：How to get some Markdown from an external resource and render it to an HTML page?如何从外部资源中获取一些 Markdown 并将其呈现到 HTML 页面？
【发布时间】：2021-10-16 21:53:54
【问题描述】：

我有一个 HTML 文件和一个 markdown 文本。有没有办法将此降价导入 HTML 文件并保持降价格式？我已经尝试在main 标签内使用iframe、emble 和import 标签，但它不起作用。有谁知道如何解决这个问题？ stackoverflow 中提出的解决方案都没有解决我的问题，有人可以帮助我吗？

谢谢大家

已编辑： 我正在使用：markdown-it，摊牌。 https://github.com/markdown-it/markdown-it

https://github.com/showdownjs/showdown

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title></title>

   

      <script type="module" src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.js"></script>
      <script src="http://strapdownjs.com/v/0.2/strapdown.js"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.min.js" integrity="sha512-L03kznCrNOfVxOUovR6ESfCz9Gfny7gihUX/huVbQB9zjODtYpxaVtIaAkpetoiyV2eqWbvxMH9fiSv5enX7bw==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
      <script src="https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.1/showdown.js" integrity="sha512-bvV1V1YSjP1fbfKJjTlNmdnUO2XpsLYUdKwmz5UXBi5U+x40rx9JpA0ooQUMZfpz1MaaBC0ydNLoC6r0sitPUQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

  </head>
  <body>
    <header></header>
    <main>
      <pre class="hljs"><code>
    <embed type="text/txt" src="markdown.txt" height="100%"> 
         <link rel="text/txt" href="markdown.txt"    height="100%">
      </code></pre>
    </main>
    <footer></footer>
  </body>
</html>

【问题讨论】：

HTML 和 Markdown 都是标记语言。浏览器通过解释标记并将其转换为呈现的内容来格式化您的文档。浏览器无法理解 Markdown，但他们可以理解 HTML。因此，您需要将 Markdown 转换为 HTML。如何完成取决于您的网站/应用程序的设计方式。你在做客户端还是服务器端的事情？您使用什么语言？
我使用cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/…@PeterO。
客户端 @Wing 。但是我在 html 中导入 markdown 时也遇到了问题。
好的，所以您正在使用一个库来尝试解析您的 Markdown 并将其转换为 HTML 以进行渲染。您可以将此信息添加到您的问题中吗？您可以添加到目前为止您尝试过的代码吗？现在任何人真正能做的就是将您指向该库的文档并告诉您按照说明和示例进行操作。
Markdown 它的文档说您必须使用render 函数将Markdown 转换为HTML。你在哪里做这个？

标签： html markdown

【解决方案1】：

问题

这里有两个子问题：

如何从外部资源中获取 Markdown 内容？
如何将 Markdown 内容转换为 HTML 并呈现到页面中？

对于您的第一个问题，您似乎尝试使用 iframe、embed 和 object 来获取 Markdown 内容。忽略每个元素的具体问题，它们之间的共同问题是无法将获取的内容转换为 HTML。我实际上不确定当源被指定为 Markdown 文件时浏览器会尝试做什么——它们可能都只是尝试呈现纯文本，但我还没有阅读规范或对此进行测试。

第二个问题不需要任何额外的解释。

解决方案

您可以使用fetch 获取您的 Markdown 内容并将响应流读入文本 (response.text())。使用此文本，您可以将其传递到您的 Markdown 库并将输出 HTML 呈现到您的页面。下面是一个演示：

const md = window.markdownit();

fetch('https://raw.githubusercontent.com/markdown-it/markdown-it/master/README.md')
  .then((response) => response.text())
  .then((text) => {
    document.getElementById('output').innerHTML = md.render(text);
  })

<link href="https://unpkg.com/@picocss/pico@1.3.3/css/pico.slim.min.css" rel="stylesheet"/>
<div id="output"></div>
<script src="https://unpkg.com/markdown-it@8.4.2/dist/markdown-it.min.js"></script>

【讨论】：