Code block logo

Code block

Published April 2026
   •    Updated April 2026

Plugin details

Code Block — Syntax Highlighted Code Display
Display beautiful, syntax-highlighted code snippets directly in your Bubble app — no external libraries required. Built and maintained by raizen.dev, a company specializing in Bubble development, custom plugins, and web application builds, primarily serving the Ukrainian market.

---

🔧 Features

• Syntax highlighting for 17+ languages: JavaScript, TypeScript, Python, HTML, CSS, JSON, SQL, XML, YAML, Bash, PHP, Ruby, Go, Rust, C/C++, Markdown, Plain text
• Line numbers toggle — show or hide line numbers with a single checkbox
• One-click Copy button — copies raw code to clipboard with visual confirmation
• Dark & Light themes — choose between a sleek dark (Catppuccin Mocha) or clean light theme
• Fully self-contained — no CDN dependencies, works reliably inside Bubble without external script loading issues
• Exposed states: current code text, selected language
• Events: code_changed, language_changed — trigger workflows on updates

---

🌍 Use Cases

• SaaS platforms that display code snippets or API examples to users
• Developer tools, documentation pages, or internal dashboards built on Bubble
• Educational platforms and coding courses
• Any app that needs to present formatted code in a readable, professional way

---

⚠️ Compatibility Note

This plugin is designed for Bubble Web Apps only. It is not compatible with Bubble Native Mobile Apps.

---

Built by raizen.dev — Bubble development, custom plugins & apps for the Ukrainian market and beyond.

Free

For everyone

stars   •   0 ratings
1 installs  
This plugin does not collect or track your personal data.

Other actions

Platform

Web

Contributor details

Raizen.dev logo
Raizen.dev
Joined 2023   •   4 Plugins
View contributor profile

Instructions

Setup Instructions
1. Add the "Colde input" element to your page from the Visual Elements panel.

2. In the Property Editor, configure:
  • Language — select the programming language for syntax highlighting
  • Code value — paste or dynamically bind the code you want to display
  • Show line numbers — check to enable numbered lines
  • Read only — check to disable editing (display-only mode)
  • Theme — choose Dark or Light

3. Use Exposed States to read values in workflows:
  • code_text — the current code content
  • language — the currently selected language

4. Use Events to trigger workflows:
  • Code changed — fires when the code value updates
  • Language changed — fires when the language selection changes

Note: This plugin works on Web Apps only and is not compatible with Bubble Native Mobile Apps.

Types

This plugin can be found under the following types:
Element   •   Event

Categories

This plugin can be found under the following categories:
Productivity   •   Containers   •   Technical   •   Input Forms

Resources

Support contact
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble