Resources
Desktop app
Marketplace
Community
Developers
Wallpapers
Meetups
Company
Security
Careers
Report
Status
Legal
Blog
Creators
Program
Payouts
Experts
Awards
Events
Brand
Compare
Squarespace
Wordpress
Unbounce
Webflow
Figma
Wix
Solutions
Figma to HTML
Website builder
Portfolio maker
Landing pages
UI/UX design
No-code
Socials
Instagram
X Twitter
YouTube
LinkedIn
Threads
TikTok
    Framer
    EnterprisePricing
    Enterprise
    Pricing
    Marketplace
    TemplatesPluginsComponents
    Templates
    Plugins
    Components
    Component preview thumbnail
    MarketplaceComponents

    Code Block Generator

    Beautiful code block image generator inspired by ray.so with syntax highlighting, customizable themes, and stunning gradient backgrounds perfect for social media and documentation.

    Syauqizaidan Khairan Khalaf
    Syauqizaidan Khairan Khalaf
    Creator
    2w ago
    Updated
    334
    Views
    Syauqizaidan Khairan Khalaf
    Syauqizaidan Khairan Khalaf
    Creator
    2w ago
    Updated
    334
    Views

    Make it with Workshop

    Build your own component with AI


    About this Component

    Details

    Create stunning, shareable code snippets that stand out on social media, in documentation, and during presentations. This powerful component transforms your code into beautifully styled images with professional syntax highlighting and eye-catching backgrounds.

    Key Features

    • Multi-Language Support: Supports over 23 programming languages, including JavaScript, TypeScript, Python, Java, C++, HTML, and CSS.

    • Intelligent Auto-Detection: Automatically detects the programming language based on code syntax and keywords.

    • Advanced Syntax Highlighting: A custom regex-powered highlighting engine provides proper color coding for keywords, strings, comments, functions, and numbers.

    • 4 Beautiful Themes: Choose from Dark, Light, Oceanic, and Monokai themes with carefully crafted color schemes.

    • Stunning Backgrounds: Includes 6 gradient presets (Sunset, Ocean, Forest, Fire, Cosmic, Minimal), solid colors, and custom images.

    • Customizable Window Chrome: Optional macOS-style window controls with red, yellow, and green buttons.

    • Professional Typography: Separate font controls for the title and code, with monospace defaults.

    • Line Numbers: Toggle line numbers for enhanced readability.

    • Responsive Design: Auto-sizing works perfectly on any screen size.

    • HTML Entity Escaping: Safe rendering prevents code interpretation issues.

    Perfect For

    • Social media code sharing (Twitter, LinkedIn, Instagram)

    • Technical blog posts and articles

    • Documentation and tutorials

    • Presentations and slides

    • Code portfolio showcases

    • Educational materials

    Use Cases

    • Developers: Share code snippets with proper syntax highlighting.

    • Educators: Create visual code examples for courses and tutorials.

    • Content Creators: Generate eye-catching code images for social media.

    • Technical Writers: Enhance documentation with beautiful code blocks.

    • Presenters: Add professional code visuals to presentations.

    Technical Highlights

    • React + TypeScript with full type safety.

    • Custom syntax highlighting engine (no external dependencies).

    • Responsive height that follows the container while keeping code blocks centered.

    • HTML-safe rendering with proper entity escaping.

    • Optimized performance with React hooks and memoization.

    • Framer-native property controls for seamless editing.

    The component automatically centers code blocks within custom heights, making it perfect for creating consistent layouts while ensuring your code always looks crisp and readable. Whether you're sharing a quick JavaScript function or a complex Python algorithm, this component makes your code look professional and engaging.

    Support
    About ComponentsRefund PolicyContact Creator

    More Components

    See All →
    Thumbnail for 008 Text Scramble, a Framer Marketplace template by 099 Supply.
    008 Text Scramble
    $4
    099 Supply
    Thumbnail for CosmicSpiral, a Framer Marketplace template by Sadman Alam.
    CosmicSpiral
    $12
    Sadman Alam
    Thumbnail for Slide Up Button, a Framer Marketplace template by Till Janek.
    Slide Up Button
    Free
    Till Janek
    Thumbnail for Cursor Image Reveal, a Framer Marketplace template by Alberto.
    Cursor Image Reveal
    $10
    Alberto
    Thumbnail for Spectra Frame, a Framer Marketplace template by Hamim Reza.
    Spectra Frame
    $15
    Hamim Reza
    Thumbnail for Snowflakes, a Framer Marketplace template by Charu Consul.
    Snowflakes
    Free
    Charu Consul
    Thumbnail for Lookbook / Shop Look, a Framer Marketplace template by Digithink Technologies.
    Lookbook / Shop Look
    $12
    Digithink Technologies
    Thumbnail for OrbitFlowRings, a Framer Marketplace template by Can Girgin.
    OrbitFlowRings
    $9
    Can Girgin

    More from Syauqizaidan Khairan Khalaf

    See All →
    Thumbnail for Image Locker, a Framer Marketplace component by Syauqizaidan Khairan Khalaf.
    Image Locker
    component · $5
    Syauqizaidan Khairan Khalaf
    Thumbnail for Message Chat, a Framer Marketplace component by Syauqizaidan Khairan Khalaf.
    Message Chat
    component · $5
    Syauqizaidan Khairan Khalaf
    Thumbnail for OS Download Button, a Framer Marketplace component by Syauqizaidan Khairan Khalaf.
    OS Download Button
    component · Free
    Syauqizaidan Khairan Khalaf