能否将Markdown文件URL作为GET参数传入库URL实现客户端渲染？

当前实现方式 #

目前我们可以通过以下代码在静态站点完成客户端Markdown渲染：

<div id="txt"></div>
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
<script>
  fetch("https://raw.githubusercontent.com/ccharles/pages-test/master/markdown.md")
      .then(r => r.text())
      .then(m => { document.getElementById("txt").innerHTML = marked.parse(m) })
</script>

核心问题解答 #

直接给Marked.js的CDN URL添加MDUri这类GET参数无法实现自动渲染，因为官方Marked.js库本身没有处理URL参数的逻辑，不会主动读取参数中的Markdown文件地址去请求并渲染内容。

可行替代方案 #

方案1：自定义参数解析脚本

你可以自己封装一个极简的加载脚本，把参数解析、库加载、Markdown渲染逻辑整合在一起，托管到自己的静态站点后，就能通过带参数的URL引用它：

引用方式：

<script src="https://你的静态站点地址/md-loader.js?MDUri=https://raw.githubusercontent.com/ccharles/pages-test/master/markdown.md"></script>

md-loader.js的内容：

// 解析当前脚本URL中的参数
const urlParams = new URLSearchParams(document.currentScript.src.split('?')[1]);
const mdUrl = urlParams.get('MDUri');

if (mdUrl) {
  // 动态加载Marked.js
  const markedScript = document.createElement('script');
  markedScript.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';
  markedScript.onload = () => {
    // 请求Markdown文件并渲染到页面
    fetch(mdUrl)
      .then(res => res.text())
      .then(mdContent => {
        // 创建渲染容器并插入页面
        const renderContainer = document.createElement('div');
        renderContainer.id = 'markdown-rendered';
        document.body.appendChild(renderContainer);
        renderContainer.innerHTML = marked.parse(mdContent);
      });
  };
  document.body.appendChild(markedScript);
}

方案2：内联参数解析逻辑

如果不想额外托管脚本，也可以把参数解析逻辑直接写在页面中，代码同样简洁：

<div id="markdown-container"></div>
<script>
  // 解析当前脚本的URL参数
  const scriptUrl = new URL(document.currentScript.src);
  const mdUrl = scriptUrl.searchParams.get('MDUri');
  
  if (mdUrl) {
    // 加载Marked.js
    const script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';
    script.onload = () => {
      fetch(mdUrl)
        .then(r => r.text())
        .then(md => {
          document.getElementById('markdown-container').innerHTML = marked.parse(md);
        });
    };
    document.body.appendChild(script);
  }
</script>

其他说明 #

如果使用其他客户端Markdown渲染库，逻辑也是类似的——官方库基本都不会支持直接通过CDN URL参数加载源文件，需要自己添加参数解析和加载渲染的逻辑，或者寻找专门做这类封装的轻量工具。

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