如何使用marked.js加载本地.md文件并渲染为HTML内容

安全阿岳

2026-9-2

问题原因

marked.parse 的入参要求是Markdown格式的纯字符串，这个库本身不内置读取本地文件的能力。你之前试的两种写法本质都是给方法传了无意义的普通字符串，根本没有读取到file.md里的实际内容，自然无法正常渲染。

实现方法

浏览器环境下要渲染独立存储的.md文件，分两步走：

先通过HTTP请求读取目标.md文件的文本内容
将拿到的Markdown文本传入marked.parse解析为HTML，再插入到页面对应位置即可

可直接复用的代码示例

先在页面里预留渲染Markdown的容器，再引入你本地存放的marked库文件，写入以下逻辑：

<div id="markdown-container"></div>
<script src="marked.min.js"></script>
<script>
async function loadAndRenderMd(mdPath) {
  try {
    // 拉取md文件内容
    const response = await fetch(mdPath);
    if (!response.ok) throw new Error(`文件加载异常：${response.status}`);
    const mdText = await response.text();
    // 解析为HTML并插入页面
    document.getElementById('markdown-container').innerHTML = marked.parse(mdText);
  } catch (error) {
    console.error('Markdown渲染失败:', error);
    document.getElementById('markdown-container').textContent = 'Markdown文件加载失败，请检查路径是否正确';
  }
}

// 页面DOM加载完成后执行渲染
document.addEventListener('DOMContentLoaded', () => {
  // 这里替换成你自己的md文件路径
  loadAndRenderMd('file.md');
});
</script>

注意事项

本地测试不要直接双击HTML文件用file://协议打开，浏览器的安全策略会拦截该协议下的fetch请求，报跨域错误。本地调试请启动静态文件服务，比如用编辑器的本地预览插件、或者本地启动简易HTTP服务都可以。
传入的md文件路径要写对，和HTML同目录就直接写文件名，在子目录就补全相对路径，比如./docs/xxx.md。
如果渲染的md文件来源不完全可控，建议配置marked的安全过滤规则，避免恶意脚本被注入页面。