Real Python
  • Start Here
  • Learn Python
    Start Learning
    Your Learning Plan →Your personalized Python learning plan Python Tutorials →In-depth articles and video courses Learning Paths →Guided study plans for accelerated learning
    Practice
    Quizzes & Exercises →Check your learning progress Browse Topics →Focus on a specific area or skill level Reference →Concise definitions for common Python terms
    Get Help
    Code Mentor →BetaPersonalized code assistance & learning tools Office Hours →Live Q&A calls with Python experts Community Chat →Learn with other Pythonistas
    Go Deeper
    Live Courses →Live, instructor-led Python courses Books →Round out your knowledge and learn offline Podcast →Hear what’s new in the world of Python
    Unlock All Content and Become a Python Expert →Get unlimited access to all Real Python has to offer
    Unlock All Content →Become a Python Expert
  • More
    Learner Stories Python Newsletter Python Job Board Meet the Team Become a Contributor
  • Search
/
  • Join
  • Sign‑In

— FREE Email Series —

🐍 Python Tricks 💌

Python Tricks Dictionary Merge

🔒 No spam. Unsubscribe any time.

Browse Topics Guided Learning Paths
Basics Intermediate Advanced
ai algorithms api best-practices career community databases data-science data-structures data-viz devops django docker editors flask front-end gamedev gui machine-learning news numpy projects python stdlib testing tools web-dev web-scraping

Table of Contents

  • Demo: A Code Image Generator With Python
  • Project Overview
  • Prerequisites
  • Step 1: Set Up the Code Image Generator
    • Install the Dependencies
    • Give Playwright a Spin
    • Create the Flask Project Layout
    • Write Your Initial Templates
    • Add Custom Styling With CSS
  • Step 2: Accept Code Input
    • Update the Code Input Page
    • Introduce Sessions
    • Manage Sessions
    • Style the Code Input Page
  • Step 3: Color Your Code
    • Introduce Syntax Highlighting With Pygments
    • Highlight the Code
    • Get All the Styles
    • Link Code Input and Style Selection
  • Step 4: Generate an Image From the Code
    • Add the Code Image Routes
    • Take a Screenshot With Playwright
    • Display the Code Image
    • Style the Code Image Template
  • Step 5: Improve the User Experience
    • Show the Current Style
    • Let JavaScript Do the Clicking
    • Fall Back Gracefully
  • Conclusion
  • Next Steps

Recommended Course

Build a Code Image Generator With Python