Build a Code Image Generator With Python

If you’re active on social media, then you know that images and videos are popular forms of content. As a programmer, you mainly work with text, so sharing the content that you create on a daily basis may not seem intuitive. That’s where a code image generator can come in handy for you!

With a code image generator, you can create a nice-looking image of your code snippets. That way, you can share code without worrying about formatting, different syntax highlighting, or character count limitations.

In this step-by-step tutorial, you’ll learn how to:

• Set up and run a Flask project
• Connect and style Jinja templates
• Use Playwright to create images
• Beautify code with Pygments
• Leverage sessions to save browser states
• Enhance the user experience with JavaScript

Creating your own code image generator will allow you to hone your skills as a Python programmer and experiment with full-stack web development.

Although you’ll find plenty of full-featured code image generators like carbon or ray.so, crafting a custom tool will allow you to meet your specific needs and continue to improve it later on.

Demo: A Code Image Generator With Python

The code image generator is a Flask project that creates stylish screenshots of a code snippet with the help of Pygments and Playwright. The project will run locally in your browser, and you have full control over the look of the code that you want to share:

Once you run the Flask server, you can visit the application in the browser, add your own Python code, select a style, and download an image of the code to your computer.

Project Overview

You’ll build the code image generator in multiple steps. In each step, you’ll focus on one important area of your codebase.

After setting up the project, you’ll notice that the structure of the tutorial mirrors the route that a user would take when using your tool. You start by creating the pages and functions to accept code input from the user.

Then, you move on to implementing the selection of syntax highlighting styles. This will make a user’s code snippet look good when you build the route to generate an image of the code in the following step.

Finally, you’ll have a closer look at some areas of your project and improve the user experience. At the end of the tutorial, you’ll have your very own code image generator that’s ready to use and highly extensible.

Over the course of the tutorial, you’ll get guidance on which files and folders to create. In the end, your project layout will look like this:

code-image-generator/
│
├── static/
│   └── styles.css
│
├── templates/
│   ├── base.html
│   ├── code_input.html
│   ├── image.html
│   └── style_selection.html
│
├── app.py
└── utils.py

In the materials for this tutorial, you’ll find a folder for each step, containing source code of the project in its current state:

At the end of each step, you can compare your own code with the source code while following along. If you have questions about a step or you’re stuck at some point, then you can scroll down to the comments area and ask the Real Python community for help.

Prerequisites

In this tutorial, you’ll build a code image generator with Python, Flask, Pygments, and Playwright. While working through the steps, it’ll be helpful if you’re comfortable with the following concepts:

• Jinja templating
• HTML and CSS
• JavaScript
• Python decorators

If you’re not confident in your knowledge of these prerequisites, then that’s okay too! In fact, going through this tutorial will help you learn and practice these concepts. You can always stop and review the resources linked above if you get stuck.