{"slug": "your-articles-need-a-copy-for-ai-button", "title": "Your articles need a “Copy for AI” button", "summary": "A developer-focused newsletter post proposes adding a \"Copy for AI\" button to articles so readers can hand AI chats clean Markdown instead of messy select-and-copy output, implemented in roughly 30 lines of JavaScript. The post's toMarkdown function converts headings, paragraphs, lists, links, inline code and fenced code blocks while skipping buttons, navigation, scripts and styles, and it appends the page URL so the model can cite the source. The author argues pasted text beats sharing a URL because many AI tools cannot open links, get blocked by sites, or read cached copies, and Markdown is the format models handle best.", "body_md": "# Your articles need a “Copy for AI” button\n\n**Creem.io**\n\nMerchant of record payments for SaaS and digital products, handling checkout, subscriptions, taxes, invoices, and global payment operations.\n\n[Sponsor this newsletter · reach 9,500+ active developers](https://markodenic.tech/sponsorship/)\n\nYour readers already paste your articles into AI chats. They want a summary, a version of your code for their stack, or an answer to the question your article almost covered. So they select the page, copy, paste.\n\nWhat the AI gets is a mess: menu links, “Copy” button labels, line numbers glued to the code, and prose and code mashed together with no clear edges. Docs sites have started fixing this with a “Copy for AI” button that hands over a clean Markdown version of the page instead. You can add one in about 30 lines.\n\n## The fix\n\nWalk the article and turn each element into its Markdown equivalent:\n\n```\nfunction toMarkdown(node) {\n  if (node.nodeType === Node.TEXT_NODE) {\n    return node.parentNode.closest('p, li, h1, h2, h3') ? node.textContent.replace(/\\s+/g, ' ') : '';\n  }\n  if (node.nodeType !== Node.ELEMENT_NODE || node.matches('button, nav, script, style, [data-no-copy]')) return '';\n\n  const inner = [...node.childNodes].map(toMarkdown).join('');\n  const text = inner.trim();\n\n  switch (node.tagName) {\n    case 'H1': return `# ${text}\\n\\n`;\n    case 'H2': return `## ${text}\\n\\n`;\n    case 'H3': return `### ${text}\\n\\n`;\n    case 'P': return `${text}\\n\\n`;\n    case 'UL': case 'OL': return `${inner}\\n`;\n    case 'LI': return `- ${text}\\n`;\n    case 'STRONG': return `**${text}**`;\n    case 'EM': return `_${text}_`;\n    case 'A': return `[${text}](${node.href})`;\n    case 'CODE': return `\\`${node.textContent}\\``;\n    case 'PRE': {\n      const lang = node.querySelector('code')?.className.match(/language-(\\w+)/)?.[1] ?? '';\n      return `\\`\\`\\`${lang}\\n${node.textContent.trim()}\\n\\`\\`\\`\\n\\n`;\n    }\n    default: return inner;\n  }\n}\n```\n\nThen copy it on click, with the page URL on top so the AI can point back to the source:\n\n``` js\ncopyButton.addEventListener('click', async () => {\n  const markdown = toMarkdown(document.querySelector('article')).trim();\n  await navigator.clipboard.writeText(`Source: ${location.href}\\n\\n${markdown}`);\n  copyButton.textContent = 'Copied!';\n});\n```\n\nThis post has the button. Click “Copy for AI” next to the date at the top, paste it into any AI chat or text editor, and compare it with a plain select-and-copy of the same page.\n\n## What the converter handles\n\n- **Headings, paragraphs, lists:** become`#` , plain text, and`-` items.\n- **Links:** keep their full URL, because`node.href` is always absolute. Relative links would be useless outside your site.\n- **Code blocks:** become fenced blocks, and the`language-js` class most syntax highlighters add becomes the fence’s language. Inline`code` keeps its backticks.\n- **Noise:** buttons, navigation, scripts and styles are skipped. Anything else you want left out, like a newsletter signup box in the middle of the article, gets a`data-no-copy` attribute.\n- **Whitespace:** text outside paragraphs, list items and headings is dropped. That is almost always the indentation of your HTML, which would otherwise end up as stray spaces.\n\nIt is not a full HTML-to-Markdown converter. Tables, images and nested lists are not covered. Add a `case` when your content needs one: it is one line each.\n\n## Why not just give them the URL?\n\nSome AI tools can open a link. Many cannot, some get blocked by the site, and some read a cached copy from months ago. Pasted text always works, and it is exactly what the reader is looking at right now.\n\nMarkdown is also the format models handle best. A heading is one `#` instead of a wrapper of classes, and code fences mark exactly where code starts and ends, so the model stops mixing your explanation into your code.\n\n## Where this comes up\n\n- **Tutorials and blog posts:** “rewrite this for my framework” is the most common thing readers do with them.\n- **Documentation:** developers paste docs pages into their coding assistant to get help on your API.\n- **Changelogs and release notes:** “what changed that affects me?”\n- **Long policies and guides:** support articles, terms, onboarding checklists.\n\n## Why this matters\n\n- **Readers are already doing it:** the button only decides whether the AI gets your content clean or garbled.\n- **Better answers about your content:** clean structure means fewer wrong explanations of your code.\n- **It works everywhere:** the Clipboard API is supported in every modern browser. It needs HTTPS and a click, which a button already gives you.\n\nIf you like where this is going, my issue on [letting AI agents use your site with 3 HTML attributes](https://markodenic.tech/let-ai-agents-use-your-site-with-3-html-attributes/) covers the other side: agents using your features, not just reading your content. And if you’d rather offer one button for every app, the [native share button](https://markodenic.tech/how-to-add-a-native-share-button-with-four-lines-of-javascript/) is four lines.\n\nPut the button next to your article’s title and paste the result into an AI chat. You will see the difference in the first answer.\n\nHappy coding!\n\nMarko", "url": "https://wpnews.pro/news/your-articles-need-a-copy-for-ai-button", "canonical_source": "https://markodenic.tech/your-articles-need-a-copy-for-ai-button/", "published_at": "2026-10-17 10:00:14+00:00", "updated_at": "2026-10-17 10:02:29.809643+00:00", "lang": "en", "topics": ["ai-tools", "generative-engine-optimization", "ai-search"], "entities": ["Creem.io"], "also_reported_by": [], "alternates": {"html": "https://wpnews.pro/news/your-articles-need-a-copy-for-ai-button", "markdown": "https://wpnews.pro/news/your-articles-need-a-copy-for-ai-button.md", "text": "https://wpnews.pro/news/your-articles-need-a-copy-for-ai-button.txt", "jsonld": "https://wpnews.pro/news/your-articles-need-a-copy-for-ai-button.jsonld"}}