Code Screenshot Beautifier

Turn code snippets into beautiful screenshots with multiple themes, syntax highlighting, and custom styles.

Code Input

Style Settings

Language

Theme

Window Style

Title

Padding

Line Numbers Shadow

Background Color

Border Radius

Preview

index.js

function fibonacci(n) {
  if (n <= 1) return n;
  
  let prev = 0;
  let curr = 1;
  
  for (let i = 2; i <= n; i++) {
    const next = prev + curr;
    prev = curr;
    curr = next;
  }
  
  return curr;
}

// 计算前 10 个斐波那契数
for (let i = 0; i < 10; i++) {
  console.log(`fib(${i}) = ${fibonacci(i)}`);
}

Usage

This tool generates beautiful screenshots from code snippets, perfect for sharing on blogs, social media, or in documentation.

Features

Professional syntax highlighting powered by Shiki, supporting 40+ languages
12 beautiful themes (One Dark, Dracula, Nord, Monokai, etc.)
macOS / Windows window styles with custom title support
Customizable line numbers, shadow, border radius, padding, and background color
One-click export to PNG / JPG / WebP / SVG with 1x/2x/3x scale support

Steps

Enter or paste code in the "Code Input" box on the left
Choose language, theme, and window style in "Style Settings"
Adjust title, padding, border radius, background color as needed
Toggle "Line Numbers" or "Shadow" switches to enable features
Preview the result on the right, then click "Export Screenshot" when satisfied
Choose format (PNG/JPG/WebP/SVG) and scale (1x/2x/3x) in the export dialog

Notes

SVG is a vector format, ideal for lossless scaling scenarios
PNG/WebP are bitmap formats; use 2x or 3x scale for HD output
Background color only affects the preview container; the code card background is determined by the theme
All rendering happens locally in the browser; your code never leaves your device