{"id":314013,"date":"2026-06-01T10:50:48","date_gmt":"2026-06-01T10:50:48","guid":{"rendered":"https:\/\/wordpress.org\/plugins\/lumicode-syntax-highlighter\/"},"modified":"2026-06-01T11:27:23","modified_gmt":"2026-06-01T11:27:23","slug":"lumicode-syntax-highlighter","status":"publish","type":"plugin","link":"https:\/\/wordpress.org\/plugins\/lumicode-syntax-highlighter\/","author":23476667,"comment_status":"closed","ping_status":"closed","template":"","meta":{"version":"1.5.6","stable_tag":"1.5.6","tested":"7.0","requires":"6.0","requires_php":"8.0","requires_plugins":null,"header_name":"LumiCode Syntax Highlighter","header_author":"Cr8v Stacks","header_description":"Beautiful syntax highlighting with auto-detection, copy buttons, line numbers, and a safe scanner.","assets_banners_color":"2b4e62","last_updated":"2026-06-01 11:27:23","external_support_url":"","external_repository_url":"","donate_link":"https:\/\/cr8vstacks.com","header_plugin_uri":"https:\/\/cr8vstacks.com\/dev-playground\/lumicode-syntax-highlighter\/","header_author_uri":"https:\/\/cr8vstacks.com","rating":0,"author_block_rating":0,"active_installs":0,"downloads":29,"num_ratings":0,"support_threads":0,"support_threads_resolved":0,"author_block_count":0,"sections":["description","installation","faq","changelog"],"tags":{"1.5.6":{"tag":"1.5.6","author":"cr8vstacks","date":"2026-06-01 11:27:23"}},"upgrade_notice":{"1.5.2":"

Recommended upgrade - fixes light mode in TinyMCE dialog, line number alignment, and expand\/collapse reliability. No breaking changes.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3556605,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128}},"assets_banners":{"banner-772x250.png":{"filename":"banner-772x250.png","revision":3556605,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":{"lumicode\/code-block":{"name":"lumicode\/code-block","title":"Lumicode Code Block"}},"tagged_versions":["1.5.6"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3556605,"resolution":"1","location":"assets","locale":"","width":1545,"height":1076},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3556605,"resolution":"2","location":"assets","locale":"","width":1527,"height":843},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3556605,"resolution":"3","location":"assets","locale":"","width":1531,"height":780},"screenshot-4.png":{"filename":"screenshot-4.png","revision":3556605,"resolution":"4","location":"assets","locale":"","width":1546,"height":907},"screenshot-5.png":{"filename":"screenshot-5.png","revision":3556605,"resolution":"5","location":"assets","locale":"","width":1256,"height":976}},"screenshots":{"1":"Settings page<\/strong> - theme picker, font options, toggles for line numbers, copy button, and collapse","2":"Dark mode code box<\/strong> - VS Code-style titlebar, traffic-light dots, copy button, statusbar","3":"Light mode code box<\/strong> - switches chrome colors while keeping the hljs theme intact","4":"Collapse \/ Expand<\/strong> - long blocks collapse with a gradient overlay and pill button","5":"TinyMCE dialog and scanner<\/strong> - insert formatted code or find existing bare <pre><\/code> blocks"}},"plugin_section":[],"plugin_tags":[24363,18607,2275,32776,7526],"plugin_category":[],"plugin_contributors":[265315],"plugin_business_model":[],"class_list":["post-314013","plugin","type-plugin","status-publish","hentry","plugin_tags-code-block","plugin_tags-code-snippet","plugin_tags-developer","plugin_tags-highlight-js","plugin_tags-syntax-highlighter","plugin_contributors-cr8vstacks","plugin_committers-cr8vstacks"],"banners":{"banner":"https:\/\/ps.w.org\/lumicode-syntax-highlighter\/assets\/banner-772x250.png?rev=3556605","banner_2x":false,"banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/lumicode-syntax-highlighter\/assets\/icon-128x128.png?rev=3556605","icon_2x":false,"generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/lumicode-syntax-highlighter\/assets\/screenshot-1.png?rev=3556605","caption":"Settings page<\/strong> - theme picker, font options, toggles for line numbers, copy button, and collapse"},{"src":"https:\/\/ps.w.org\/lumicode-syntax-highlighter\/assets\/screenshot-2.png?rev=3556605","caption":"Dark mode code box<\/strong> - VS Code-style titlebar, traffic-light dots, copy button, statusbar"},{"src":"https:\/\/ps.w.org\/lumicode-syntax-highlighter\/assets\/screenshot-3.png?rev=3556605","caption":"Light mode code box<\/strong> - switches chrome colors while keeping the hljs theme intact"},{"src":"https:\/\/ps.w.org\/lumicode-syntax-highlighter\/assets\/screenshot-4.png?rev=3556605","caption":"Collapse \/ Expand<\/strong> - long blocks collapse with a gradient overlay and pill button"},{"src":"https:\/\/ps.w.org\/lumicode-syntax-highlighter\/assets\/screenshot-5.png?rev=3556605","caption":"TinyMCE dialog and scanner<\/strong> - insert formatted code or find existing bare <pre><\/code> blocks"}],"raw_content":"\n

LumiCode<\/strong> 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.<\/p>\n\n

Key Features<\/h3>\n\n
    \n
  • 40+ languages<\/strong> auto-detected - PHP, JavaScript, TypeScript, Python, Go, Rust, SQL, YAML, Bash, and more<\/li>\n
  • 13 bundled themes<\/strong> - Atom One, Dracula, GitHub, Monokai, Night Owl, Nord, Solarized, VS 2015, Xcode, and more, powered by highlight.js 11.11.1<\/li>\n
  • Dark & Light mode<\/strong> - toggle from the admin topbar. Applies to both admin UI and frontend code boxes<\/li>\n
  • Copy to Clipboard<\/strong> - one-click copy button on every code block<\/li>\n
  • Line numbers<\/strong> - perfectly aligned, synced to font size and line height<\/li>\n
  • Collapse \/ Expand<\/strong> - long code blocks auto-collapse after a configurable number of lines<\/li>\n
  • Filename \/ language badge<\/strong> - shows in the titlebar of every code box<\/li>\n
  • TinyMCE integration<\/strong> - Insert Code Block button in the Classic Editor toolbar, with language detection and all options<\/li>\n
  • Gutenberg block<\/strong> - native block editor support<\/li>\n
  • Code Scanner<\/strong> - scans your entire site for bare <pre><\/code> blocks and lets you apply LumiCode with one click, or dismiss<\/li>\n
  • Auto-detect<\/strong> - wraps any existing <pre><\/code> blocks automatically on the frontend without touching your content<\/li>\n<\/ul>\n\n

    How It Works<\/h3>\n\n

    LumiCode renders code blocks server-side (shortcodes + TinyMCE insertion) and enhances them on the frontend with a lightweight JS renderer. The renderer wraps <pre class=\"lumicode-pre\"><\/code> elements in a beautiful VS Code-style chrome (titlebar, statusbar, line numbers, copy button) and runs highlight.js for syntax coloring.<\/p>\n\n

    No page builders required. Works with any theme.<\/p>\n\n

    Shortcode Usage<\/h3>\n\n
    [lumicode lang=\"javascript\"]\nconst greeting = \"Hello, world!\";\nconsole.log(greeting);\n[\/lumicode]\n<\/code><\/pre>\n\n
    All shortcode attributes:<\/strong>\n* lang<\/code> - language identifier (e.g. php<\/code>, python<\/code>, typescript<\/code>)\n* title<\/code> - filename shown in titlebar (e.g. config.js<\/code>)\n* highlight<\/code> - lines to accent (e.g. 1,3-5<\/code>)\n* collapse<\/code> - force collapse (true<\/code>\/false<\/code>)\n* collapse-after<\/code> - collapse after N lines (overrides global setting)<\/p>\n\n
    Performance<\/h3>\n\n
      \n
    • highlight.js is loaded locally (v11.11.1) for speed and privacy<\/li>\n
    • Our CSS and JS are tiny (<15 KB combined, unminified)<\/li>\n
    • No jQuery dependency on the frontend<\/li>\n<\/ul>\n\n\n
        \n
      1. Upload the lumicode-syntax-highlighter<\/code> folder through Plugins -> Add New -> Upload Plugin<\/strong>, or place it in your site's plugins directory.\n\n
          \n
        • OR - install directly from the WordPress plugin search: Plugins -> Add New -> search \"LumiCode\"<\/li>\n<\/ul><\/li>\n
        • Activate the plugin through the Plugins<\/strong> menu in WordPress<\/li>\n
        • Go to LumiCode -> Settings<\/strong> to choose your theme, font, and options<\/li>\n
        • Insert code blocks using:\n\n
            \n
          • Classic Editor<\/strong>: click the Code button in the TinyMCE toolbar<\/li>\n
          • Block Editor<\/strong>: search for \"LumiCode\" in the block inserter<\/li>\n
          • Shortcode<\/strong>: [lumicode lang=\"php\"]...[\/lumicode]<\/code><\/li>\n<\/ul><\/li>\n<\/ol>\n\n\n
            \n
            Does this work with the Block Editor (Gutenberg)<\/h3><\/dt>\n
            Yes. LumiCode includes a native Gutenberg block. Search for \"LumiCode\" in the block inserter.<\/p><\/dd>\n
            Does this work with the Classic Editor<\/h3><\/dt>\n
            Yes. LumiCode adds an  Code button to the Classic Editor (TinyMCE) toolbar. Click it to open the Insert Code Block dialog with language detection, filename, highlight lines, and collapse options.<\/p><\/dd>\n
            Will it break my existing `
            ` blocks<\/pre><\/h3><\/dt>\n
            No. LumiCode's auto-detect mode wraps existing <pre><\/code> blocks on the frontend only - your database content is never modified. You can also use the Code Scanner (LumiCode -> Code Scanner) to see what it finds and apply the design selectively.<\/p><\/dd>\n
            Can I use my own highlight.js theme<\/h3><\/dt>\n
            All 13 built-in themes are bundled and available in Settings. Currently custom themes aren't supported.<\/p><\/dd>\n
            Does it slow down my site<\/h3><\/dt>\n
            LumiCode is designed for performance. highlight.js is served completely locally from your own server, eliminating third-party asset requests. Our own CSS + JS is under 15 KB combined, ensuring your site remains blazingly fast.<\/p><\/dd>\n
            Can I have different settings per code block<\/h3><\/dt>\n
            Yes. Per-block overrides work via shortcode attributes (lang<\/code>, title<\/code>, highlight<\/code>, collapse<\/code>, collapse-after<\/code>) and via the TinyMCE dialog fields. Global defaults come from Settings.<\/p><\/dd>\n
            Is it compatible with page caching plugins<\/h3><\/dt>\n
            Yes. LumiCode is purely frontend-rendered - there are no per-request PHP computations on the frontend. Works with WP Rocket, W3 Total Cache, LiteSpeed Cache, and any other caching plugin.<\/p><\/dd>\n
            What PHP version do I need<\/h3><\/dt>\n
            PHP 8.0 or higher. WordPress 6.0 or higher.<\/p><\/dd>\n\n<\/dl>\n\n\n
            1.5.6<\/h4>\n\n
              \n
            • Maintenance: Updated bundled highlight.js to v11.11.1 and kept assets served locally.<\/li>\n
            • Maintenance: Refined bundled asset loading and shortcode behavior.<\/li>\n
            • Maintenance: Refined code block handling across shortcode, scanner, block editor, and auto-enhance flows.<\/li>\n
            • Fix: Updated Plugin URI to point to the public LumiCode preview page.<\/li>\n<\/ul>\n\n
              1.5.5<\/h4>\n\n
                \n
              • Maintenance: Improved generated code block markup and frontend enhancement behavior.<\/li>\n
              • Maintenance: Updated bundled assets and admin loading flow.<\/li>\n
              • Fix: Improved plugin metadata and shortcode naming consistency.<\/li>\n<\/ul>\n\n
                1.5.4<\/h4>\n\n
                  \n
                • Maintenance: Refined bundled library handling and admin asset loading.<\/li>\n
                • Maintenance: Improved frontend enhancement behavior.<\/li>\n
                • Maintenance: Updated shortcode registration.<\/li>\n
                • Bug Fix: Corrected CSS appearance<\/code> property in dialog.<\/li>\n<\/ul>\n\n
                  1.5.3<\/h4>\n\n
                    \n
                  • Added frontend recognition for inline code-style elements: <code><\/code>, <kbd><\/code>, <samp><\/code>, and <var><\/code>.<\/li>\n
                  • Added inline styling for those elements so examples like service-row<\/code>, service-row-1<\/code>, and similar tokens render clearly in paragraphs and lists.<\/li>\n
                  • Updated inline code styling to use a transparent background, #1e40af<\/code> text color, and a matching blue border color scheme.<\/li>\n<\/ul>\n\n
                    1.5.2<\/h4>\n\n
                      \n
                    • Fix: TinyMCE Insert Code dialog now switches to light mode when admin is in light mode<\/li>\n
                    • Fix: Expand overlay now hides reliably on expand (CSS-driven, no JS timing issues)<\/li>\n
                    • Fix: Line number gutter alignment - padding and line-height precisely match code area<\/li>\n
                    • Fix: Line height reduced to 1.5 (standard for code editors, was 1.6)<\/li>\n
                    • Fix: Collapse bar now has 30px top\/bottom padding for visual breathing room<\/li>\n
                    • Fix: All frontend CSS rules use !important for full isolation from theme styles<\/li>\n
                    • Fix: Enqueue handles are now versioned (prevents WordPress internal handle caching)<\/li>\n
                    • Improvement: Updated asset loading hints for better frontend performance.<\/li>\n
                    • Improvement: Collapse correctly wraps .lc-pw-lined<\/code> when line numbers are on<\/li>\n<\/ul>\n\n
                      1.5.1<\/h4>\n\n
                        \n
                      • Fix: Light mode toggle now reliably applies across admin and frontend<\/li>\n
                      • Fix: Collapse system - wraps correct element when line numbers are enabled<\/li>\n
                      • Fix: Phosphor Icons decoupled from parent font-size (use explicit font-size)<\/li>\n
                      • Fix: Admin CSS enqueue handles versioned to prevent WordPress style registry caching<\/li>\n
                      • Fix: Complete light mode coverage with !important on all rules in admin-shared.css<\/li>\n<\/ul>\n\n
                        1.5.0<\/h4>\n\n
                          \n
                        • Removed all custom cache-busting systems - back to simple LUMICODE_VERSION<\/li>\n
                        • Inline vanilla JS toggle in topbar (no jQuery dependency)<\/li>\n
                        • DB setting light_mode now controls both admin and frontend<\/li>\n
                        • Code block overlay collapse \/ expand redesign with gradient + backdrop blur<\/li>\n<\/ul>\n\n
                          1.4.9<\/h4>\n\n
                            \n
                          • LUMICODE_BUILD token system for zip-level cache busting<\/li>\n
                          • Overlay collapse design with gradient + backdrop blur<\/li>\n
                          • Frontend\/admin light mode sync via DB setting<\/li>\n<\/ul>\n\n
                            1.4.8<\/h4>\n\n
                              \n
                            • filemtime()-based cache busting for CSS\/JS<\/li>\n
                            • Inline expand\/collapse pill<\/li>\n
                            • Light mode system via .lc-pw-is-light class<\/li>\n
                            • Scanner dismiss persistence<\/li>\n<\/ul>\n\n
                              1.4.7<\/h4>\n\n
                                \n
                              • File-rename-based cache busting<\/li>\n
                              • DB-based asset version timestamps<\/li>\n
                              • Flush Asset Cache button in settings<\/li>\n<\/ul>\n\n
                                1.4.6<\/h4>\n\n
                                  \n
                                • TinyMCE editor insertion flow<\/li>\n
                                • hljs warnings fixed<\/li>\n
                                • wpautop inline fix<\/li>\n<\/ul>\n\n
                                  1.0.0<\/h4>\n\n
                                    \n
                                  • Initial release<\/li>\n<\/ul>","raw_excerpt":"Beautiful syntax highlighting for WordPress. Auto-detects 40+ languages, with copy buttons, line numbers, collapse, and a dark\/light theme switcher.","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin\/314013","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin"}],"about":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/types\/plugin"}],"replies":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/comments?post=314013"}],"author":[{"embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wporg\/v1\/users\/cr8vstacks"}],"wp:attachment":[{"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/media?parent=314013"}],"wp:term":[{"taxonomy":"plugin_section","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_section?post=314013"},{"taxonomy":"plugin_tags","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_tags?post=314013"},{"taxonomy":"plugin_category","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_category?post=314013"},{"taxonomy":"plugin_contributors","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_contributors?post=314013"},{"taxonomy":"plugin_business_model","embeddable":true,"href":"https:\/\/wordpress.org\/plugins\/wp-json\/wp\/v2\/plugin_business_model?post=314013"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}