0 Copy Multiple Files to Markdown with One Script.md

Copy Multiple Files to Markdown with One Script for GitHub Gist

This JavaScript snippet is a self-invoking utility designed to collect multiple file entries from a web page and copy them to the clipboard as a clean, Markdown-formatted document. It is especially useful when working with interfaces that display several editable files, such as code editors or snippet managers.

• It scans the page for elements marked as files.
• For each file, it extracts the displayed file name and its text content.
• It wraps each file’s content in Markdown-style code fences.
• It combines all files into a single Markdown string, separated by blank lines.
• It copies the final result directly to the clipboard using a temporary textarea.

The script runs entirely in the browser, requires no external libraries, and provides a simple console message indicating whether the copy operation succeeded. This makes it a practical, lightweight solution for quickly exporting structured content for documentation or sharing.

javascript:(()=>{const md=Array.from(document.querySelectorAll(%22.file%22)).map(file=>{const nameEl=file.querySelector(%22:scope > .file-header > .file-info > a > strong%22);const fileName=(nameEl?.innerText||%22%22).trim();const%20textEl=file.querySelector(%27:scope%20%3E%20textarea[name=%22gist[content]%22]%27);return`${fileName}\n\`\`\`\`\`\`\n${textEl?.value??%22%22}\n\`\`\`\`\`\``}).filter(Boolean).join(%22\n\n%22);const%20ta=document.createElement(%22textarea%22);ta.value=md;ta.setAttribute(%22readonly%22,%22%22);ta.style.position=%22fixed%22;ta.style.top=%22-9999px%22;ta.style.left=%22-9999px%22;document.body.appendChild(ta);ta.focus();ta.select();const%20ok=document.execCommand(%22copy%22);document.body.removeChild(ta);console.log(ok?%22Copied%20to%20clipboard.%22:%22Copy%20failed.%22)})();

main.js

(() => {
  // 1) Collect
  const files = Array.from(document.querySelectorAll(".file"));

  const md = files
    .map((file) => {
      // File name (assuming `strong` is a single element, so use querySelector)
      const nameEl = file.querySelector(
        ":scope > .file-header > .file-info > a > strong"
      );
      const fileName = (nameEl?.innerText || "").trim();

      // Body (assuming `textarea` is also a single element)
      const textEl = file.querySelector(
        ':scope > textarea[name="gist[content]"]'
      );
      const fileContents = textEl?.value ?? "";

      // You can skip empty elements here if you don't want to include them
      // if (!fileName && !fileContents) return "";

      return `${fileName}\n\`\`\`\`\`\`\n${fileContents}\n\`\`\`\`\`\``;
    })
    .filter(Boolean)
    .join("\n\n"); // Separate files with a blank line

  // 2) Create a temporary textarea for execCommand("copy")
  const ta = document.createElement("textarea");
  ta.value = md;
  ta.setAttribute("readonly", "");
  ta.style.position = "fixed";
  ta.style.top = "-9999px";
  ta.style.left = "-9999px";

  document.body.appendChild(ta);
  ta.focus();
  ta.select();

  // 3) Execute copy
  const ok = document.execCommand("copy");
  document.body.removeChild(ta);

  // 4) Simple log
  console.log(ok ? "Copied to clipboard." : "Copy failed.");
  // If needed, you can also log `md` to inspect it
  // console.log(md);
})();