DEV Community

Cover image for Stop Sending Ugly Code Screenshots — Export Pixel-Perfect PDFs Directly from VS Code
Sushil Kulkarni
Sushil Kulkarni

Posted on

Stop Sending Ugly Code Screenshots — Export Pixel-Perfect PDFs Directly from VS Code

#vscode #pdf #ai #extensions

I got tired of sending ugly code screenshots and broken PDFs.

So I built a VS Code extension that exports code exactly as it appears in your editor.

Same theme. Same syntax colors. Same layout.

It’s called TreePress— and it works in one command.

If you’ve ever shared code outside your IDE, you’ll understand why this matters.

🚀 What This Article Covers

  • Why exporting code is still a problem in 2026
  • How TreePress solves it (cleanly)
  • What makes it different from existing tools
  • When you should actually use it
  • Practical workflows you can adopt today

🤦 The Problem: Sharing Code Is Still Painful

You’ve probably done at least one of these:

  • Took a screenshot of code for a doc or PR
  • Exported to PDF and lost formatting
  • Copied code into Word/Docs → everything broke
  • Shared Markdown that renders differently for everyone

Even worse:

  • No syntax highlighting
  • No searchability
  • No structure (good luck finding functions in a 20-page PDF)

We’ve normalized bad workflows.

💡 What TreePress Does (In Simple Terms)

TreePress exports your open VS Code file into a pixel-perfect, searchable PDF.

Not “close enough”.

Exactly how your editor looks.

That means:

  • Same theme
  • Same syntax colors
  • Same layout
  • Same structure

No config. No tweaking.

Just: Ctrl + Shift + Alt + E

And you're done.

⚙️ How It Works (Under the Hood)

This is where it gets interesting.

TreePress uses a dual-layer rendering approach:

1. Visual Layer (Chromium Rendering)

  • Uses headless Chromium
  • Captures your editor as-is (fonts, colors, spacing)

2. Text Layer (Searchable Overlay)

  • Adds an invisible text layer on top
  • Makes the PDF:
    • Searchable
    • Copyable
    • Accessible

This solves the classic trade-off:

Traditional Export TreePress
Looks good ❌ Looks identical ✅
Searchable ❌ Searchable ✅
Consistent ❌ Fully consistent ✅

🔥 Features That Actually Matter

🎯 Pixel-Faithful Rendering

Your PDF = your editor.

No reformatting engines. No approximations.

🔍 Fully Searchable PDFs

Unlike screenshots or image-based exports, you can:

  • Search functions
  • Copy code
  • Index documents

📚 Automatic Table of Contents

TreePress generates PDF bookmarks from:

  • Code symbols
  • Markdown headings

So your 50-page file is actually navigable.

🎨 Theme-Aware Export

  • Uses your current VS Code theme
  • Or lets you pick another installed theme

Yes — your Dracula / Nord / One Dark stays intact.

🧾 Markdown That Looks Like Docs

Two modes:

  • Rendered (like GitHub)
  • Raw source (syntax-highlighted)

📓 Jupyter Notebook Support

Exports:

  • Code cells
  • Outputs (including images)

Perfect for:

  • Data science reports
  • ML experiments
  • Research sharing

🧬 Git Footer Stamp (Underrated Feature)

Adds this to every page:

  • Branch
  • Commit hash
  • Author
  • Date

This is huge for:

  • Audits
  • Reviews
  • Compliance docs

👀 Preview Before Download

You can:

  • Navigate pages
  • Adjust settings
  • Re-render instantly

No blind exports.

🧠 Why This Actually Matters

This isn’t just about “nice PDFs”.

It fixes real workflows:

1. Code Reviews in PDF Form

Useful for:

  • External audits
  • Client sharing
  • Offline reviews

2. Documentation That Doesn’t Break

No more:

  • Formatting issues
  • Missing styles
  • Inconsistent rendering

3. Teaching & Content Creation

Perfect for:

  • Tutorials
  • Courses
  • Blog visuals
  • Books

4. Enterprise & Compliance Use Cases

That Git footer alone makes this viable for:

  • Regulated environments
  • Version tracking
  • Code traceability

🛠️ How to Use It (Takes 5 Seconds)

You have three options:

  1. Right-click → Export to PDF
  2. Command Palette → TreePress: Export to PDF
  3. Shortcut → Ctrl + Shift + Alt + E

That’s it.

⚡ Practical Workflows You Should Try

Here’s where TreePress becomes addictive:

📄 Share PRs as PDFs

Export a file and attach it to:

  • Emails
  • Jira tickets
  • Slack threads

📘 Create Developer Docs Instantly

Write Markdown → export → done.

📊 Export Data Files Cleanly

CSV → becomes a styled table

JSON → syntax-highlighted and readable

🧪 Share Experiments

Notebook → PDF → send to stakeholders

No environment needed.

⚠️ Limitations (Good to Know)

  • Files over 15,000 lines won’t export fully
  • Image preview requires command palette (VS Code limitation)
  • Notebook output export has minor trigger constraints

Nothing surprising — mostly platform constraints.

💭 Key Insight: This Should Exist Natively

TreePress feels like one of those tools where you think:

“Wait… why doesn’t VS Code already do this?”

Because:

  • It’s not just export
  • It’s faithful rendering + structured output

That combination is rare.

✅ Practical Takeaways

  • Stop using screenshots for code sharing
  • Use searchable PDFs when sharing outside dev environments
  • Add version context using Git footer stamps
  • Standardize exports across your team

If you care about clarity and consistency, this is worth adopting.

🧵 Final Thoughts

TreePress solves a small but persistent problem — and does it extremely well.

No setup. No learning curve. No compromises.

Just clean, accurate, professional code exports.

Sometimes, that’s all you need.

👇 What Do You Think?

Would you use PDF exports for code in your workflow?

Or are screenshots and Git links still enough for you?

Curious to hear how you’re currently sharing code 👇

Top comments (0)