doremi

Posted on Apr 26

Why Copying Code from AI Chat Tools Still Breaks Your Indentation (And How to Fix It)

#webdev #tools

If you've ever copied a code block from ChatGPT or Claude and pasted it into your editor, you've probably seen this:

# What ChatGPT shows you:
def process_data(items: list[dict]) -> dict:
    result = {}
    for item in items:
        if item.get("active"):
            key = item["category"]
            result.setdefault(key, []).append(item["value"])
    return result

# What ends up in your clipboard:
def process_data(items: list[dict]) -> dict:
        result = {}
        for item in items:
            if item.get("active"):
                key = item["category"]
                    result.setdefault(key, []).append(item["value"])
    return result

Tabs became spaces. Spaces became tabs. The whole thing is a mess. And if you're working with nested code — callbacks, decorators, class methods — it gets exponentially worse.

The Technical Root Cause

AI chat interfaces render code blocks using <pre><code> elements with CSS for styling. The syntax highlighting is applied via CSS classes (Prism.js, Highlight.js, or custom). When you select and copy:

The browser's clipboard API tries to serialize the selection
It includes CSS-computed styles as rich text
Most target apps (VS Code, IDEs, terminals) expect plain text
The mismatch causes indentation corruption

Here's the kicker: the underlying text in the DOM is usually correct. It's the clipboard serialization that breaks things. Different browsers handle this differently too — Chrome, Firefox, and Safari all have slightly different clipboard behavior.

I Tested 5 Approaches

1. Direct Copy-Paste

Result: Fails ~60% of the time with nested code
Why: Clipboard serialization corrupts whitespace

2. "View Source" in DevTools

Result: Works but tedious
Why: You get the raw text but have to manually extract it

3. ChatGPT's Share Link

Result: Preserves formatting but read-only
Why: It's a rendered webpage, not a code export

4. Export to Markdown

Result: Best option for developers
Why: Markdown preserves code fences with language tags. Clean, portable, editor-friendly.

5. Export to PDF with Syntax Highlighting

Result: Good for documentation, not for reuse
Why: Visual fidelity is high but you can't edit the code

The Solution I Settled On

I started using a Chrome extension that handles multi-platform AI export (ChatGPT, Claude, Gemini, DeepSeek, Grok). The Markdown export is what I use 90% of the time:

Code blocks come out with proper language tags and indentation
No formatting corruption — it's plain text with markdown syntax
Works with Obsidian, VS Code, any editor
Batch export — I can grab an entire conversation at once

The extension is called XWX AI Chat Exporter. It's free (PDF has a daily limit, but Markdown is unlimited). I'm not affiliated with the devs — just a user who got tired of fixing broken indentation.

Bonus: My Obsidian Integration

Since I'm exporting to Markdown anyway, I piped everything into Obsidian:

AI Conversations/
├── 2026-04/
│   ├── 2026-04-21-system-design.md
│   ├── 2026-04-20-api-refactor.md
│   └── 2026-04-19-auth-architecture.md

Each exported file gets:

Frontmatter with date, AI platform, and topic tags
Proper code fences with language identifiers
Preserved headings for the conversation structure

This turns AI conversations into a searchable knowledge base. When I need to find "that conversation about rate limiting strategies," I just search my vault instead of scrolling through ChatGPT history.

The Real Issue

This whole problem shouldn't exist. AI chat tools are used by millions of developers who need to copy code reliably. The fact that the default copy-paste still breaks indentation in 2026 is... not great.

Until the platforms fix it properly (they should just offer a "Copy as plain text" button that actually works), extensions and workarounds are your best bet.

What's your approach? Do you deal with broken formatting, or have you found a workflow that works?

DEV Community