Pretty Code Screenshots

A Next.js application to create beautiful code screenshots.

Try the live version here:

https://prettycodescreenshots.vercel.app/

Features

• Syntax highlighting with support for numerous programming languages
• Multiple themes to customize the appearance of your code
• Configurable options:
  • Show/hide line numbers
  • Adjust padding
  • Set border radius
  • macOS-style window bar
  • Custom file name
• Light/dark theme for the interface
• Simple export as PNG image with custom file naming

Technologies

• Next.js
• React
• Tailwind CSS
• shadcn/ui
• react-syntax-highlighter
• html-to-image

Getting Started

1. Clone the repository
2. Install dependencies with npm install
3. Start the application in development mode with npm run dev
4. Open http://localhost:3000 in your browser

Usage

1. Paste your code in the text box
2. Select the appropriate language
3. Choose a syntax theme
4. Configure the options (line numbers, padding, border radius, macOS bar, file name)
5. Click "Download Screenshot" to save the image

License

MIT