如何在客户端渲染Markdown时显示GitHub Gist内容？

目前使用Marked.js可以正常渲染Markdown文件，但其中的GitHub Gist内容无法显示，现有实现代码如下：

现有HTML代码 #

<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>

<div id="content"></div>

现有JS代码 #

fetch("https://raw.githubusercontent.com/Ayanmullick/test/master/testfolder/StachExgMdScript.md")
    .then(response => response.blob())  // 转换为Blob对象
    .then(blob => blob.text())          // 转换为纯文本
    .then(markdown => {        // 将文本传入marked.parse进行解析
        document.getElementById("content").innerHTML = marked.parse(markdown)
    })

另外，在VS Code中禁用Markdown content preview settings里的Disable preview security warning in this workspace选项后，Gist可以正常渲染。

解决方案 #

核心原因 #

Marked.js默认仅解析标准Markdown语法，而GitHub Gist的嵌入依赖带src属性的<script>标签。出于安全考虑，Marked.js默认会过滤HTML中的<script>标签，这就是Gist无法显示的原因。

实现步骤 #

1. 配置Marked.js允许合法脚本标签
   通过marked.setOptions修改配置，可选择关闭全局HTML过滤（风险较高），或仅允许Gist域名的脚本标签：

   // 方案1：关闭全局HTML sanitize（仅适用于可信Markdown来源）
   marked.setOptions({
     sanitize: false
   });
   
   // 方案2：精细过滤，仅保留gist.github.com来源的脚本标签（更安全）
   marked.setOptions({
     sanitizer: (html) => {
       const allowedGistScripts = /<script[^>]+src="https:\/\/gist\.github\.com[^>]*><\/script>/gi;
       return html.match(allowedGistScripts)?.join('') || '';
     }
   });
   

2. 确保Markdown中的Gist嵌入语法正确
   直接在Markdown中使用标准的Gist嵌入脚本标签即可：

   <script src="https://gist.github.com/你的用户名/目标GistID.js"></script>
   

3. 更新解析逻辑，触发脚本执行
   通过innerHTML插入的<script>标签不会自动执行，需要手动替换标签以触发加载：

   // 先配置Marked选项
   marked.setOptions({
     sanitize: false // 若用精细过滤则替换为方案2的配置
   });
   
   fetch("https://raw.githubusercontent.com/Ayanmullick/test/master/testfolder/StachExgMdScript.md")
     .then(response => response.text()) // 可直接转换为文本，无需先转Blob
     .then(markdown => {
       const parsedHtml = marked.parse(markdown);
       const contentEl = document.getElementById("content");
       contentEl.innerHTML = parsedHtml;
   
       // 手动执行Gist脚本
       const scripts = contentEl.querySelectorAll("script");
       scripts.forEach(oldScript => {
         const newScript = document.createElement("script");
         // 复制原脚本的所有属性
         Array.from(oldScript.attributes).forEach(attr => {
           newScript.setAttribute(attr.name, attr.value);
         });
         oldScript.parentNode.replaceChild(newScript, oldScript);
       });
     });
   

关键注意事项 #

• 安全风险：关闭全局sanitize会引入XSS风险，若解析的Markdown来自不可信来源，务必使用精细过滤方案，仅允许Gist域名的脚本。
• 脚本执行：innerHTML插入的脚本不会自动运行，必须通过创建新脚本标签替换原标签的方式触发加载。

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