57:I[473921,["/creators-assets/_next/static/immutable/chunks/3c-b-8ufmviux.js","/creators-assets/_next/static/immutable/chunks/2lb80c7sdmm1x.js","/creators-assets/_next/static/immutable/chunks/24qz5wotuh5hj.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/0j6nsovyxcqkz.js","/creators-assets/_next/static/immutable/chunks/3mwqlk6tp5l2t.js","/creators-assets/_next/static/immutable/chunks/2dvu3r_tb3ihz.js","/creators-assets/_next/static/immutable/chunks/1q7v4rdbqi_5d.js","/creators-assets/_next/static/immutable/chunks/2fw--q9y_1nc-.js","/creators-assets/_next/static/immutable/chunks/1w_rozgc2dplq.js","/creators-assets/_next/static/immutable/chunks/0dglr8x18qkm5.js","/creators-assets/_next/static/immutable/chunks/0a8vglvd9phm3.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/06p8bv9p94pxh.js","/creators-assets/_next/static/immutable/chunks/42u1pxaq7eeka.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/2bbm33yuxi64a.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/0kjwwabuczr28.js","/creators-assets/_next/static/immutable/chunks/088oy6f_9ll4s.js","/creators-assets/_next/static/immutable/chunks/22zq93dcklbwz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/0eljubaqaqluk.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3g7os-hf6q3tv.js","/creators-assets/_next/static/immutable/chunks/1e3mmtw6okz19.js","/creators-assets/_next/static/immutable/chunks/3fcb65_46-jt7.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/28h79imj-g45k.js","/creators-assets/_next/static/immutable/chunks/2x3imtac9af--.js","/creators-assets/_next/static/immutable/chunks/2t6l_zgbmmx8u.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/0_ulklfcrp-s3.js","/creators-assets/_next/static/immutable/chunks/3-uff2nrv83hw.js","/creators-assets/_next/static/immutable/chunks/0alicgkopr9se.js","/creators-assets/_next/static/immutable/chunks/0-kepukl8ldjk.js","/creators-assets/_next/static/immutable/chunks/2-u6q7fsgfx0e.js"],"PostDetailCard"] 58:T98b,

Code Block Pro transforms ordinary code snippets into beautifully designed, interactive code presentations. Featuring rich syntax highlighting, animated file tabs, elegant editor-inspired layouts, and refined motion, it brings a professional developer experience directly to your Framer website.

Showcase multiple programming languages, switch between code examples, and let visitors copy snippets instantly. With customizable themes, typography, animations, and interface controls, Code Block Pro makes technical content feel polished, engaging, and effortless to explore.

✦ Key Features

Syntax Highlighting – Beautifully color-coded code for improved readability.
10 Programming Languages – Supports TypeScript, JavaScript, Python, Go, Rust, Ruby, PHP, Java, Shell, and JSON.
Multiple Code Tabs – Organize different code snippets with animated tab navigation.
6 Premium Themes – Midnight, Graphite, Abyss, Ember, Porcelain, and Linen.
Dark & Light Modes – Switch between beautifully styled code appearances.
One-Click Copy – Copy code instantly with animated confirmation feedback.
Line Highlighting – Emphasize specific lines or ranges within code snippets.
Animated Tab Transitions – Smooth spring-based transitions between code examples.
Automatic Tab Cycling – Automatically rotate between snippets at customizable intervals.
Editor-Inspired Interface – Optional window controls, file headers, and status bar.
Customizable Typography – Adjust code fonts, font sizes, line heights, and spacing.
Flexible Code Layout – Configure line numbers, word wrapping, padding, and rounded corners.

✦ Use Cases

Developer portfolios, SaaS landing pages, API documentation, programming tutorials, technical blogs, product documentation, software showcases, coding courses, and developer-focused websites.

✦ Present Code with Confidence

Code Block Pro brings the visual quality of a modern code editor into Framer, making every snippet easier to explore, understand, and share.

54:[["$","$L57",null,{"post":{"id":"01a15d7c-c02c-7110-8eb2-a2bceac5878b","title":null,"body":"

Code Block Pro

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Code Block Pro"}]}]},"author":{"framerUserId":"93e0445d-da1b-434f-be79-797c7c983df6","name":"Axis Supply","slug":"axissupply","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93e0445d-da1b-434f-be79-797c7c983df6/x7b91rcg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"Gkwt8btt4Cb7sPLkwLD2","resolved":true,"title":"Code Block Pro","body":"$58","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Code Block Pro transforms ordinary code snippets into beautifully designed, interactive code presentations. Featuring rich syntax highlighting, animated file tabs, elegant editor-inspired layouts, and refined motion, it brings a professional developer experience directly to your Framer website."}]},{"type":"paragraph","content":[{"type":"text","text":"Showcase multiple programming languages, switch between code examples, and let visitors copy snippets instantly. With customizable themes, typography, animations, and interface controls, Code Block Pro makes technical content feel polished, engaging, and effortless to explore."}]},{"type":"customHeading","attrs":{"level":1},"content":[{"type":"text","text":"✦ Key Features"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Syntax Highlighting","marks":[{"type":"bold"}]},{"type":"text","text":" – Beautifully color-coded code for improved readability."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"10 Programming Languages","marks":[{"type":"bold"}]},{"type":"text","text":" – Supports TypeScript, JavaScript, Python, Go, Rust, Ruby, PHP, Java, Shell, and JSON."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Multiple Code Tabs","marks":[{"type":"bold"}]},{"type":"text","text":" – Organize different code snippets with animated tab navigation."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"6 Premium Themes","marks":[{"type":"bold"}]},{"type":"text","text":" – Midnight, Graphite, Abyss, Ember, Porcelain, and Linen."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Dark & Light Modes","marks":[{"type":"bold"}]},{"type":"text","text":" – Switch between beautifully styled code appearances."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"One-Click Copy","marks":[{"type":"bold"}]},{"type":"text","text":" – Copy code instantly with animated confirmation feedback."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Line Highlighting","marks":[{"type":"bold"}]},{"type":"text","text":" – Emphasize specific lines or ranges within code snippets."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animated Tab Transitions","marks":[{"type":"bold"}]},{"type":"text","text":" – Smooth spring-based transitions between code examples."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Automatic Tab Cycling","marks":[{"type":"bold"}]},{"type":"text","text":" – Automatically rotate between snippets at customizable intervals."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Editor-Inspired Interface","marks":[{"type":"bold"}]},{"type":"text","text":" – Optional window controls, file headers, and status bar."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customizable Typography","marks":[{"type":"bold"}]},{"type":"text","text":" – Adjust code fonts, font sizes, line heights, and spacing."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Flexible Code Layout","marks":[{"type":"bold"}]},{"type":"text","text":" – Configure line numbers, word wrapping, padding, and rounded corners."}]}]}]},{"type":"customHeading","attrs":{"level":1},"content":[{"type":"text","text":"✦ Use Cases"}]},{"type":"paragraph","content":[{"type":"text","text":"Developer portfolios, SaaS landing pages, API documentation, programming tutorials, technical blogs, product documentation, software showcases, coding courses, and developer-focused websites."}]},{"type":"customHeading","attrs":{"level":1},"content":[{"type":"text","text":"✦ Present Code with Confidence"}]},{"type":"paragraph","content":[{"type":"text","text":"Code Block Pro brings the visual quality of a modern code editor into Framer, making every snippet easier to explore, understand, and share."}]}]},"introduction":"A Better Way to Showcase Code","slug":"code-block-pro","author":{"framerUserId":"93e0445d-da1b-434f-be79-797c7c983df6","name":"Axis Supply","slug":"axissupply","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93e0445d-da1b-434f-be79-797c7c983df6/x7b91rcg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/93e0445d-da1b-434f-be79-797c7c983df6/01a15d7c-9d6d-74ec-aedd-0667bf5633c1.png","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-10-21T08:03:38.470Z","updatedAt":"2026-10-21T08:03:38.470Z","publishedAt":"2026-10-21T08:03:38.467Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/Scriptorium-SDFz2P.js@dOVHSaQseI6afmU1sOhe","previewUrl":"https://mysterious-building-176802.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"5c50a4d9-4405-49ca-8956-4909a204480d","name":"Sections","slug":"sections"}],"lastSaveId":"dOVHSaQseI6afmU1sOhe","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":1,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-10-21T08:03:39.180Z","updatedAt":"2026-10-21T08:03:39.180Z","reported":false,"type":"post"}}],"$L59"]

Suggested for you