AltText Buddy
COMING SOON
See Details
Overview
LumiCode is a premium-quality syntax highlighter built for developers and technical bloggers who want beautiful, readable code on their WordPress site without fighting the editor. It auto-detects 40+ languages (PHP, JavaScript, TypeScript, Python, Go, Rust, SQL, YAML, Bash and more), ships 13 bundled themes (Atom One, Dracula, GitHub, Monokai, Night Owl, Nord, Solarized, VS 2015, Xcode and more), provides a VS Code-style chrome with traffic-light dots, copy-to-clipboard button, line numbers perfectly aligned to font size, and a collapse/expand overlay for long blocks. Powered by bundled highlight.js 11.11.1 — no CDN calls, no jQuery, total CSS + JS under 15 KB. Works with Classic Editor (TinyMCE button), Gutenberg block, shortcode, and includes a one-click Code Scanner to convert existing bare pre blocks sitewide.
Technical Specifications
WordPress
WordPress 6.0+, PHP 8.0+
PHP Environment
PHP 8.0+
Database Impact
Zero DB footprint
API Integrations
highlight.js 11.11.1 bundled locally
Distribution
ZIP Archive / Standard Plugin
License
GPL v2 / Open Source
Tech Stack
Syntax engine
highlight.js 11.11.1 (bundled, no CDN)
Total asset size
< 15 KB CSS + JS (unminified)
jQuery required
No — vanilla JS only
Editor support
Classic (TinyMCE), Gutenberg, Shortcode
Key Features
40+ language auto-detection (PHP, JS, TS, Python, Go, Rust, SQL …)
13 bundled themes including Dracula, Nord, Night Owl & GitHub
VS Code-style chrome: titlebar, traffic-light dots, statusbar
One-click copy-to-clipboard on every code block
Line numbers — perfectly aligned, synced to font size
Collapse/Expand overlay with gradient blur on long blocks
Dark & Light mode toggle — synced across admin & frontend
TinyMCE Classic Editor button + native Gutenberg block
Code Scanner: finds all bare pre blocks, apply with one click
Zero CDN requests — highlight.js served locally; < 15 KB total
Deep Dive
Dark / Light Mode Sync
Toggle dark or light mode from the WordPress admin topbar. The setting syncs immediately across admin and every frontend code block — powered by a single DB option, no jQuery.
Copy to Clipboard
Every code block shows a copy button in the titlebar chrome. It normalizes zero-width spaces and HTML non-breaking spaces before writing to the clipboard — no invisible character artifacts.
Collapse / Expand Overlay
Long blocks auto-collapse after a configurable line count, showing a gradient + backdrop-blur overlay and a pill expand button. No JS timing hacks — the overlay is entirely CSS-driven.
Line Numbers
Line numbers are perfectly aligned to the code font size and line height. They stay in sync whether you change themes, fonts, or collapse state.
How It Works
STEP 01
Activate — it works immediately
LumiCode auto-detects all existing bare <pre> blocks on your site and wraps them in the VS Code-style chrome on the frontend without touching your database.
STEP 02
Pick your theme & options
Choose from 13 bundled themes in Settings, set your font, configure line numbers, copy button, and the collapse threshold — one screen, no page builder needed.
STEP 03
Insert code blocks your way
Classic Editor users click the Code button in the TinyMCE toolbar. Block Editor users search "LumiCode" in the inserter. Or use the [lumicode] shortcode anywhere.
STEP 04
Scan existing content
Open LumiCode > Code Scanner to see every bare <pre> block across your site. Apply LumiCode styling with one click — or dismiss individually. Your database content is never modified.
Developer Integration & Hooks
Switch the default highlighting theme programmatically via filter:
add_filter( 'lumicode_syntax_theme', function( $theme ) {
// Switch syntax highlighter skin to Dracula
return 'dracula';
} );
// Override collapse threshold per context
add_filter( 'lumicode_collapse_after', function( $lines, $post_id ) {
return ( get_post_type( $post_id ) === 'tutorial' ) ? 20 : $lines;
}, 10, 2 );Installation Guide
1
Download Package
Get the latest build by downloading the ZIP archive from the button on this page. Save it to your desktop or downloads folder.
2
WordPress Upload
Navigate to your WordPress admin, click Plugins > Add New > Upload Plugin, then select and upload the ZIP file.
3
Activate & Configure
Click Activate Plugin. The plugin settings will appear in your admin menu — open them to configure behaviour, connect APIs, or run the optional onboarding flow.