superpowers-zh/site/md.mjs

// 零依赖 Markdown → HTML 渲染器，够用于本项目的 SKILL.md。
// 支持：ATX 标题、代码围栏、表格、有/无序列表（含嵌套）、引用、分隔线、
//       行内 code/bold/italic/link，原生 HTML 行透传。

function escapeHtml(s) {
  return s.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
}

// 行内：先保护代码片段，再处理粗体/斜体/链接
// base：当前文档在仓库里的 URL（如 .../blob/main/skills/<name>/），用于把
// SKILL.md 里指向同目录/兄弟目录的相对链接（code-reviewer.md、../x/y.md）
// 解析成 GitHub 上的真实地址 —— 站点上没有这些 .md 文件，不解析就是死链。
function inline(text, base) {
  const codes = [];
  // 行内代码 `...`
  text = text.replace(/`([^`]+)`/g, (_, c) => {
    codes.push('<code>' + escapeHtml(c) + '</code>');
    return '' + (codes.length - 1) + '';
  });
  // 其余文本转义（保护已存在的原生 HTML：本项目 SKILL.md 仅含可信内容）
  // 链接 [text](url) —— 仅放行安全 scheme（http/https/mailto/锚点/相对路径），
  // 阻断 javascript:/data:/vbscript: 等可执行 scheme，并转义引号防属性逃逸
  text = text.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_, t, u) => {
    let safe;
    if (/^(https?:|mailto:|#)/i.test(u)) {
      safe = u;                                   // 绝对链接 / 锚点：原样
    } else if (/^[a-z][a-z0-9+.-]*:/i.test(u)) {
      safe = '#';                                 // 其余 scheme（javascript:/data:…）一律阻断
    } else if (base) {
      try { safe = new URL(u, base).href; }       // 相对路径 -> 仓库真实地址
      catch { safe = '#'; }
    } else {
      safe = '#';
    }
    return `<a href="${safe.replace(/"/g, '&quot;')}" target="_blank" rel="noopener">${t}</a>`;
  });
  // 粗体 **x** / 斜体 *x*
  text = text.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
  text = text.replace(/(^|[^*])\*([^*\n]+)\*(?!\*)/g, '$1<em>$2</em>');
  // 还原代码片段
  text = text.replace(/(\d+)/g, (_, i) => codes[+i]);
  return text;
}

export function renderMarkdown(src, base) {
  // 去掉 frontmatter
  src = src.replace(/^---\n[\s\S]*?\n---\n?/, '');
  const lines = src.split('\n');
  const out = [];
  let i = 0;

  const listStack = []; // {type:'ul'|'ol', indent}
  function closeListsTo(indent) {
    while (listStack.length && listStack[listStack.length - 1].indent >= indent) {
      out.push('</li>');
      out.push('</' + listStack.pop().type + '>');
    }
  }
  function closeAllLists() {
    while (listStack.length) {
      out.push('</li>');
      out.push('</' + listStack.pop().type + '>');
    }
  }

  while (i < lines.length) {
    let line = lines[i];

    // 代码围栏
    const fence = line.match(/^```(\w*)/);
    if (fence) {
      closeAllLists();
      const lang = fence[1] || '';
      const buf = [];
      i++;
      while (i < lines.length && !/^```/.test(lines[i])) { buf.push(lines[i]); i++; }
      i++; // 跳过结束 ```
      out.push(`<pre data-lang="${lang}"><code>${escapeHtml(buf.join('\n'))}</code></pre>`);
      continue;
    }

    // 分隔线
    if (/^---+\s*$/.test(line) || /^\*\*\*+\s*$/.test(line)) {
      closeAllLists();
      out.push('<hr>');
      i++; continue;
    }

    // 标题
    const h = line.match(/^(#{1,6})\s+(.*)$/);
    if (h) {
      closeAllLists();
      const lvl = h[1].length;
      const id = h[2].trim().toLowerCase().replace(/[^\w一-龥]+/g, '-').replace(/^-|-$/g, '');
      out.push(`<h${lvl} id="${id}">${inline(h[2].trim(), base)}</h${lvl}>`);
      i++; continue;
    }

    // 表格（当前行含 | 且下一行是分隔行）
    if (/\|/.test(line) && i + 1 < lines.length && /^\s*\|?[\s:|-]+\|[\s:|-]*$/.test(lines[i + 1])) {
      closeAllLists();
      const parseRow = r => r.replace(/^\s*\|/, '').replace(/\|\s*$/, '').split('|').map(c => c.trim());
      const header = parseRow(line);
      i += 2; // 跳过表头与分隔行
      out.push('<div class="md-table"><table><thead><tr>' +
        header.map(c => `<th>${inline(c, base)}</th>`).join('') + '</tr></thead><tbody>');
      while (i < lines.length && /\|/.test(lines[i]) && lines[i].trim() !== '') {
        const cells = parseRow(lines[i]);
        out.push('<tr>' + cells.map(c => `<td>${inline(c, base)}</td>`).join('') + '</tr>');
        i++;
      }
      out.push('</tbody></table></div>');
      continue;
    }

    // 引用
    if (/^>\s?/.test(line)) {
      closeAllLists();
      const buf = [];
      while (i < lines.length && /^>\s?/.test(lines[i])) { buf.push(lines[i].replace(/^>\s?/, '')); i++; }
      out.push('<blockquote>' + inline(buf.join(' '), base) + '</blockquote>');
      continue;
    }

    // 列表项
    const li = line.match(/^(\s*)([-*]|\d+\.)\s+(.*)$/);
    if (li) {
      const indent = li[1].length;
      const type = /\d+\./.test(li[2]) ? 'ol' : 'ul';
      // 关闭比当前更深的层级
      closeListsTo(indent + 1);
      const top = listStack[listStack.length - 1];
      if (!top || top.indent < indent) {
        out.push('<' + type + '>');
        listStack.push({ type, indent });
      } else {
        out.push('</li>');
      }
      out.push('<li>' + inline(li[3], base));
      i++; continue;
    }

    // 空行
    if (line.trim() === '') {
      closeAllLists();
      i++; continue;
    }

    // 原生 HTML 行透传
    if (/^\s*<\//.test(line) || /^\s*<[a-zA-Z]/.test(line)) {
      closeAllLists();
      out.push(line);
      i++; continue;
    }

    // 段落（合并连续非空行）
    closeAllLists();
    const buf = [line];
    i++;
    while (i < lines.length && lines[i].trim() !== '' &&
           !/^(#{1,6}\s|```|>\s?|---+\s*$|\s*([-*]|\d+\.)\s)/.test(lines[i]) &&
           !(/\|/.test(lines[i]) && /^\s*\|?[\s:|-]+\|/.test(lines[i + 1] || ''))) {
      buf.push(lines[i]); i++;
    }
    out.push('<p>' + inline(buf.join(' '), base) + '</p>');
  }
  closeAllLists();
  return out.join('\n');
}