Code Screenshot

Generate Beautiful Screenshots of Code Snippets

14px
32px
12px
Code Editor
Live Preview
example.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
function fibonacci(n: number): number {
  if (n <= 1) return n;
  return fibonacci(n - 1) + fibonacci(n - 2);
}

// 计算斐波那契数列前10 items
const result = Array.from({ length: 10 }, (_, i) => fibonacci(i));
console.log('Fibonacci:', result);

interface User {
  id: number;
  name: string;
  email: string;
}

async function fetchUser(id: number): Promise<User> {
  const response = await fetch(`/api/users/${id}`);
  return response.json();
}

Code Screenshot Generator Usage Guide

Main Features

  • Theme Switching - 5 curated code themes: VS Code Dark+, GitHub, Monokai, Dracula, Solarized
  • Custom Styles - Adjustable font, font size, padding, and border radius
  • Background Gradients - Multiple beautiful gradient backgrounds to make screenshots pop
  • macOS Style - Classic window title bar with red, yellow, and green dots
  • Line Numbers - Optional line number display for a more professional look
  • One-click Export - Download PNG or copy to clipboard

Use Cases

  • Sharing code snippets on social media
  • Technical blog illustrations
  • Code display in presentations
  • Code review screenshots
  • Portfolio and resume display
  • Online tutorial illustrations

常见问题

相关工具