如何从外部资源获取一些 Markdown 并将其呈现到 HTML 页面？

Question

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

谢谢大家

已编辑： 我正在使用：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>

Answer 1

问题

这里有两个子问题：

如何从外部资源获取 Markdown 内容？
如何将Markdown内容转换成HTML并渲染到页面中？

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

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

解决方案

您可以使用 fetch to fetch your Markdown content and read the response stream into text (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>

如何从外部资源获取一些 Markdown 并将其呈现到 HTML 页面？

How to get some Markdown from an external resource and render it to an HTML page?

html

markdown

问题

解决方案