如何导入外部.md内容？基于showdown.js的Markdown转HTML问题

看起来你遇到的核心问题是：浏览器不会自动解析{{ blog.content }}这种模板语法，它只会把这段内容当成普通字符串处理，所以Showdown转出来的就是原字符串，而不是你期望的Markdown渲染结果。下面分两种常见场景给你解决方案：

场景1：使用后端模板引擎（比如EJS、Jinja2、Vue SSR等） #

如果你的{{ blog.content }}是后端模板变量，那需要确保后端在渲染HTML页面时，先把这个变量替换成实际的Markdown文本，再传给前端。举个EJS的例子：

1. 后端（Node.js + Express）传递数据：

// 假设你从数据库或文件读取到了Markdown内容
const blogContent = `# 我的博客标题
这是博客的正文内容，**支持Markdown格式**`;

app.get('/blog', (req, res) => {
  res.render('blog.html', { blog: { content: blogContent } });
});

2. 前端模板文件（blog.html，EJS语法）：

<!DOCTYPE html>
<html>
<head>
  <title>MarkDown</title>
  <script src="dist/showdown.min.js"></script>
</head>
<body>
  <!-- 用EJS的输出语法替换模板变量 -->
  <p id="content" class="hide"><%= blog.content %></p>
  <p id="output">test</p>
  <script>
    var converter = new showdown.Converter(),
        text = document.getElementById('content').innerText,
        html = converter.makeHtml(text);
    document.getElementById('output').innerHTML = html;
  </script>
</body>
</html>

这样后端渲染后，<%= blog.content %>会被替换成实际的Markdown文本，前端就能正常解析了。

场景2：纯前端加载外部.md文件 #

如果你的Markdown内容存在单独的.md文件里（比如blog.md），可以用fetch API异步加载文件内容，再交给Showdown转换：

<!DOCTYPE html>
<html>
<head>
  <title>MarkDown</title>
  <script src="dist/showdown.min.js"></script>
</head>
<body>
  <p id="output">加载中...</p>
  <script>
    var converter = new showdown.Converter();
    // 加载外部Markdown文件
    fetch('blog.md')
      .then(response => {
        if (!response.ok) throw new Error('文件加载失败');
        return response.text();
      })
      .then(markdownText => {
        const html = converter.makeHtml(markdownText);
        document.getElementById('output').innerHTML = html;
      })
      .catch(err => {
        document.getElementById('output').innerHTML = `加载错误：${err.message}`;
      });
  </script>
</body>
</html>

⚠️ 注意：这种方式需要在本地服务器环境下运行（比如用http-server启动），直接打开本地file://协议的HTML文件会触发CORS限制，导致无法加载外部文件。

为什么你的原代码不生效？ #

你原来的代码中，document.getElementById('content').innerText获取到的是字符串"{{ blog.content }}"，而不是实际的Markdown内容——因为浏览器不知道这是模板变量，只会把它当成普通文本，所以Showdown转换的就是这段字符串，最终显示出来自然就是{{ blog.content }}了。

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