如何获取外部Markdown资源并将其渲染为保留格式的HTML页面

问题根因 #

embed、link、iframe这类标签不具备Markdown解析能力，只能直接展示原始文本内容，无法实现「导入Markdown并保留格式渲染」的需求，和你引入的解析库没有关联上，因此之前的尝试都无法生效。

具体实现步骤 #

你可以任选已经引入的markdown-it或者showdown其中一个库实现，以下是两种实现示例：

方案1：使用showdown实现 #

1. 先清理head中冗余的script引用，只保留一个showdown的CDN引用即可，避免重复加载冲突。
2. 新增JS逻辑：先通过fetch请求拉取markdown.txt的原始内容，再调用showdown的API将Markdown内容转换为HTML字符串，最后插入到页面的main节点中。
   完整代码示例：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title>Markdown导入渲染</title>
    <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>
  </head>
  <body>
    <header></header>
    <main id="markdown-container"></main>
    <footer></footer>
    <script>
      // 初始化showdown转换器
      const converter = new showdown.Converter()
      // 拉取Markdown文件内容
      fetch('./markdown.txt')
        .then(res => res.text())
        .then(mdText => {
          // 转换为HTML
          const html = converter.makeHtml(mdText)
          // 插入到页面容器中
          document.getElementById('markdown-container').innerHTML = html
        })
        .catch(err => console.error('Markdown文件加载失败：', err))
    </script>
  </body>
</html>

方案2：使用markdown-it实现 #

和showdown的逻辑一致，仅解析部分API不同，示例代码：

<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8">
    <title>Markdown导入渲染</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/markdown-it/12.2.0/markdown-it.min.js"></script>
  </head>
  <body>
    <header></header>
    <main id="markdown-container"></main>
    <footer></footer>
    <script>
      // 初始化markdown-it实例
      const md = window.markdownit()
      fetch('./markdown.txt')
        .then(res => res.text())
        .then(mdText => {
          const html = md.render(mdText)
          document.getElementById('markdown-container').innerHTML = html
        })
        .catch(err => console.error('Markdown文件加载失败：', err))
    </script>
  </body>
</html>

注意事项 #

• 本地测试时需要用本地服务器启动页面，直接打开本地HTML文件会触发跨域限制，导致fetch请求失败。
• 如果需要自定义Markdown渲染样式，可以自行在head中引入对应的CSS文件适配。

内容的提问来源于stack exchange，提问作者user2535338