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.
Get Your Code: Click here to download the free source code for your Python code image generator.
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:
Get Your Code: Click here to download the free source code for your Python code image generator.
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:
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.
Step 1: Set Up the Code Image Generator
To kick things off, you’ll start by installing all the dependencies that you need for this project. Then you’ll make sure that your main components are working and implement the project structure.
At the end of this step, you’ll have a working Flask project that forms the foundation for the upcoming steps.
Install the Dependencies
In this tutorial, the project’s root directory is named code-image-generator/. During the next few steps of this tutorial, you’ll place all the files and folders that you create inside this directory.
You can create the root folder anywhere on your system. Once you’ve created it, open a new terminal session in the root directory of the project. Then select your operating system below and use your platform-specific command to set up a virtual environment:
With the above commands, you create and activate a virtual environment named venv by using Python’s built-in venv module. The parenthetical (venv) in front of the prompt indicates that you’ve successfully activated the virtual environment.
Next, use pip to install the Python packages that you’ll work with in this project:
(venv) $ python -m pip install Flask playwright Pygments
Each of the three packages will fulfill a particular role in the project:
- Flask: Running your web server
- Pygments: Highlighting your code
- Playwright: Creating the code images
You’ll learn more about each of them as you go. For now, have a closer look at Playwright.
Give Playwright a Spin
Playwright is a framework for testing websites by creating test workflows and simulating user behavior. With Playwright, you can automate tasks like form submission, UI testing, and even web scraping. In this tutorial, you’ll leverage one of Playwright’s features in particular: the capability to take screenshots of websites and elements on websites.
You installed the playwright package with pip in your virtual environment. However, to actually use Playwright, you also need to install the required browsers:
(venv) $ python -m playwright install
This command installs the latest version of Chromium, Firefox, and WebKit. These are similar to the browser that you use to explore the Web.
The main difference is that these browsers are headless, which means that they don’t have a graphical user interface (GUI). Instead, you use Playwright to run them in the background, and you can control the browsers programmatically.
Open the Python REPL and test out Playwright to receive the content of a website element:
>>> from playwright.sync_api import sync_playwright
>>> target_url = "https://www.example.com"
>>> element = "h1"
>>> with sync_playwright() as playwright:
... webkit = playwright.webkit
... browser = webkit.launch()
... browser_context = browser.new_context()
... page = browser_context.new_page()
... page.goto(target_url)
... found_element = page