Code Shot

Simple Electron desktop app to create nice JPG pictures of code for Instagram and Twitter.

READ this Full Document and follow the Instructions

This app is just me playing around and learning more about building Electron apps. So don't expect to much 😀

This app will mature as I learn Electron's API.

Install / Run

# Clone this repository
git clone https://github.com/topdown/code-shot
# Go into the repository
cd code-shot

Add Backgrounds

Before running or building the app you need to add some background images. Wallpapers or something similar in (high) resolution is best.

Add your background images to assets/backgrounds/

The should be named like the following.

background1.jpg
background2.jpg
background3.jpg
background4.jpg
background5.jpg
background6.jpg
background7.jpg
background8.jpg
background9.jpg
background10.jpg

It will randomly load the background 1 - 10.

Now you can run the app

# Install dependencies
npm install
# Run the app
npm start

NOTE: The app will open to the size of a typical Instagram photo.

Changing the window size changes the saved image size later.

Build

I have only tested this on MacOS High Sierra

I used electron-packager which is already a dependency in the package.json

# MacOS
electron-packager . --overwrite --platform=darwin --arch=x64 --icon=assets/icons/Code-Shot2.icns --prune=true --out=release-builds

Your app will be in the release-builds directory and you can drag it into Applications on your Mac to install.

Using the App

There are key commands for using the app or see the Help menu.

Commands (MacOS tested)

• The normal App commands, see the Edit Menu
• Command+R to reload this will refresh the app and choose a new random background.
• Command+Q to quit the app.
• Command+H to hide the app.
• Option + N opens the form to add code and select highlighting (PHP, CSS, JS, Bash)
• Option + Enter to insert the code.
• Option + S to generate and save an image of it.

Option+N

Option+Enter

Option+S

Result

Now you can upload to your Instagram.