File names now render as an editor-style tab above the code block, themed to match your chosen colour scheme. Adds a "File Name Style" setting to switch back to the toolbar label.<\/p>","1.1.0":"
Adds server-side highlighting mode (highlight.php) with full theme parity across all 21 Prism themes, plus a "Plain Text" language picker option.<\/p>","1.0.0":"
Initial release.<\/p>"},"ratings":[],"assets_icons":{"icon-128x128.png":{"filename":"icon-128x128.png","revision":3620012,"resolution":"128x128","location":"assets","locale":"","width":128,"height":128},"icon-256x256.png":{"filename":"icon-256x256.png","revision":3620012,"resolution":"256x256","location":"assets","locale":"","width":256,"height":256}},"assets_banners":{"banner-1544x500.png":{"filename":"banner-1544x500.png","revision":3612324,"resolution":"1544x500","location":"assets","locale":"","width":1544,"height":500},"banner-772x250.png":{"filename":"banner-772x250.png","revision":3612324,"resolution":"772x250","location":"assets","locale":"","width":772,"height":250}},"assets_blueprints":{},"all_blocks":[],"tagged_versions":["1.0.0","1.1.0","1.2.0"],"block_files":[],"assets_screenshots":{"screenshot-1.png":{"filename":"screenshot-1.png","revision":3521484,"resolution":"1","location":"assets","locale":"","width":2520,"height":1428},"screenshot-2.png":{"filename":"screenshot-2.png","revision":3521484,"resolution":"2","location":"assets","locale":"","width":1504,"height":1512},"screenshot-3.png":{"filename":"screenshot-3.png","revision":3521484,"resolution":"3","location":"assets","locale":"","width":1828,"height":1286}},"screenshots":{"1":"Block editor \u2014 language picker, line numbers toggle, title field, and more in the Inspector Controls sidebar.","2":"Frontend code block with Prism.js syntax highlighting, line numbers, and toolbar.","3":"Plugin settings page \u2014 choose a global colour scheme, default language, and more."}},"plugin_section":[],"plugin_tags":[24363,12156,148076,7527,4609],"plugin_category":[],"plugin_contributors":[78250,78249],"plugin_business_model":[],"class_list":["post-294542","plugin","type-plugin","status-publish","hentry","plugin_tags-code-block","plugin_tags-code-highlighting","plugin_tags-gutenberg","plugin_tags-prism","plugin_tags-syntax-highlighting","plugin_contributors-ajay","plugin_contributors-webberzone","plugin_committers-ajay"],"banners":{"banner":"https:\/\/ps.w.org\/webberzone-code-block-highlighting\/assets\/banner-772x250.png?rev=3612324","banner_2x":"https:\/\/ps.w.org\/webberzone-code-block-highlighting\/assets\/banner-1544x500.png?rev=3612324","banner_rtl":false,"banner_2x_rtl":false},"icons":{"svg":false,"icon":"https:\/\/ps.w.org\/webberzone-code-block-highlighting\/assets\/icon-128x128.png?rev=3620012","icon_2x":"https:\/\/ps.w.org\/webberzone-code-block-highlighting\/assets\/icon-256x256.png?rev=3620012","generated":false},"screenshots":[{"src":"https:\/\/ps.w.org\/webberzone-code-block-highlighting\/assets\/screenshot-1.png?rev=3521484","caption":"Block editor \u2014 language picker, line numbers toggle, title field, and more in the Inspector Controls sidebar."},{"src":"https:\/\/ps.w.org\/webberzone-code-block-highlighting\/assets\/screenshot-2.png?rev=3521484","caption":"Frontend code block with Prism.js syntax highlighting, line numbers, and toolbar."},{"src":"https:\/\/ps.w.org\/webberzone-code-block-highlighting\/assets\/screenshot-3.png?rev=3521484","caption":"Plugin settings page \u2014 choose a global colour scheme, default language, and more."}],"raw_content":"\n
WebberZone Code Block Highlighting<\/strong> is the easiest way to add syntax highlighting to your WordPress site. It extends the native Gutenberg Simply activate the plugin and your code blocks will instantly display beautiful, readable syntax highlighting on the frontend. Choose from 40+ programming languages and 21 colour themes, all controlled from the block editor's Inspector Controls sidebar.<\/p>\n\n Pick the rendering mode that best fits your site from the settings page:<\/p>\n\n Both modes use the same 21 Prism themes and produce visually identical output, so you can switch between client-side and server-side rendering at any time without changing how your code blocks look.<\/p>\n\n 40 languages including: Apache Config, Bash, C, C++, C#, CSS, Dart, Docker, F#, Go, GraphQL, Groovy, Haskell, HTML, Java, JavaScript, JSON, JSX, Kotlin, Lua, Markdown, Nginx, Objective-C, Perl, PHP, PowerShell, Python, R, Ruby, Rust, Sass, Scala, SQL, Swift, TOML, TSX, TypeScript, Vim, XML, YAML. Use the A11y Dark, Coldark Cold (Light), Coldark Dark, Dracula, Duotone Dark, Duotone Light, GitHub (Light), Gruvbox Dark, Gruvbox Light, Lucario, Material Dark, Material Light, Night Owl, Nord, One Dark, One Light, Shades of Purple, Solarized Dark, Synthwave '84, VS Code Dark+, Xonokai (Monokai).<\/p>\n\n WebberZone Code Block Highlighting does not collect personal data, set cookies, or communicate with any external services.<\/p>\n\n The plugin is open source and available on GitHub<\/a>. Pull requests for bug fixes and new features are welcome. Please use the WordPress.org support forum<\/a> for support and GitHub Issues<\/a> for confirmed bug reports.<\/p>\n\n Help translate WebberZone Code Block Highlighting into your language on WordPress.org<\/a>. See the Translator Handbook<\/a> for guidance.<\/p>\n\n After activation, open any post or page in the block editor, add or select a Code block, and the Code Highlighting<\/strong> panel will appear in the Inspector Controls sidebar.<\/p>\n\n\n No. WebberZone Code Block Highlighting uses JavaScript and PHP filters to extend the native No. Because the plugin extends 40 languages out of the box: Apache Config, Bash, C, C++, C#, CSS, Dart, Docker, F#, Go, GraphQL, Groovy, Haskell, HTML, Java, JavaScript, JSON, JSX, Kotlin, Lua, Markdown, Nginx, Objective-C, Perl, PHP, PowerShell, Python, R, Ruby, Rust, Sass, Scala, SQL, Swift, TOML, TSX, TypeScript, Vim, XML, and YAML.<\/p>\n\n Use the You can also use the In client-side<\/strong> mode (the default), Prism.js<\/a> runs in the visitor's browser and highlights your code on page load. This mode enables interactive toolbar features such as copy-to-clipboard and expand\/collapse.<\/p>\n\n In server-side<\/strong> mode, the plugin uses highlight.php<\/a> to pre-render the highlighted markup on the server. No JavaScript is loaded for highlighting, which is great for performance, Core Web Vitals, and sites with strict content-security policies. Both modes share the same 21 Prism themes and produce visually identical results, so you can switch freely from Settings > Code Block Highlighting<\/strong>.<\/p><\/dd>\n Yes. When server-side mode is enabled, syntax colours are baked into the HTML on the server \u2014 no Prism.js or any other JavaScript is enqueued for highlighting.<\/p><\/dd>\n No. Theme CSS and (in client-side mode) Prism JS are only enqueued on pages that contain at least one code block. All other pages are unaffected. Use the Enter a comma-separated list of lines or ranges in the Highlight Lines<\/strong> field in the Inspector Controls sidebar (e.g. Yes. Use the Title<\/strong> field in the Inspector Controls sidebar. The label is displayed in the Prism toolbar above the code block.<\/p><\/dd>\n The plugin ships with 21 Prism themes. The active theme is selected globally on the settings page (Settings > Code Block Highlighting<\/strong>). Per-block theme switching is not currently supported.<\/p><\/dd>\n Yes. The plugin is built specifically for the Gutenberg block editor (WordPress 6.6+) and uses the native block filter APIs. It does not support the Classic Editor.<\/p><\/dd>\n Please report security bugs found in the source code of the WebberZone Code Block Highlighting plugin through the Patchstack Vulnerability Disclosure Program<\/a>. The Patchstack team will assist you with verification, CVE assignment, and notify the developers of this plugin.<\/p><\/dd>\n\n<\/dl>\n\n\n Release Date - 6 August 2026<\/em><\/p>\n\n Release post: https:\/\/webberzone.com\/announcements\/code-block-highlighting-v1-2-0\/<\/a><\/p>\n\ncore\/code<\/code> block with Prism.js<\/a> highlighting in the browser, or optional server-side highlighting with highlight.php<\/a> \u2014 no shortcodes, no block replacement, no risk of breaking existing posts.<\/p>\n\nTwo highlighting modes<\/h3>\n\n
\n
Why use this plugin?<\/h3>\n\n
\n
core\/code<\/code>. Existing posts are never invalidated. Deactivate the plugin and your blocks are still valid standard WordPress code blocks.<\/li>\nSupported languages<\/h3>\n\n
wzcbh_languages<\/code> filter to add or remove entries from the language picker.<\/p>\n\nIncluded themes (21)<\/h3>\n\n
Per-block features<\/h3>\n\n
\n
1,3-5<\/code>) to visually highlight using Prism's line-highlight plugin.<\/li>\nGlobal settings<\/h3>\n\n
\n
Developer filters<\/h3>\n\n
\n
wzcbh_languages<\/code> \u2014 Filter the language list array (slug => label<\/code>)<\/li>\nwzcbh_color_scheme_css_url<\/code> \u2014 Override the Prism theme CSS URL<\/li>\nwzcbh_force_load_assets<\/code> \u2014 Force Prism assets to load on every page<\/li>\n<\/ul>\n\nGDPR<\/h3>\n\n
Contribute<\/h3>\n\n
Translations<\/h3>\n\n
Other plugins by WebberZone<\/h3>\n\n
\n
WordPress admin (recommended)<\/h4>\n\n
\n
Manual installation<\/h4>\n\n
\n
wp-content\/plugins\/<\/code> directory. You should end up with a webberzone-code-block-highlighting\/<\/code> folder.<\/li>\n\n
Does this plugin replace the core Code block?<\/h3><\/dt>\n
core\/code<\/code> block. It never swaps the block for a custom one, so existing posts are never invalidated and the plugin can be deactivated without leaving behind broken blocks.<\/p><\/dd>\nWill my code blocks break if I deactivate the plugin?<\/h3><\/dt>\n
core\/code<\/code> rather than replacing it, deactivating simply removes the highlighting. Your code content is stored in standard WordPress block markup and remains valid.<\/p><\/dd>\nWhich programming languages are supported?<\/h3><\/dt>\n
wzcbh_languages<\/code> filter to add or remove entries from the language picker. Note: adding a language to the filter only affects the UI dropdown \u2014 the corresponding Prism.js grammar must also be available on the frontend (either bundled in frontend.js<\/code> or loaded separately).<\/p><\/dd>\nHow do I add a custom or additional Prism theme?<\/h3><\/dt>\n
\n
build-prism.js<\/code>.<\/li>\nincludes\/assets\/<\/code>.<\/li>\nincludes\/admin\/class-settings.php<\/code>.<\/li>\nnpm run build:prism<\/code>.<\/li>\n<\/ol>\n\nwzcbh_color_scheme_css_url<\/code> filter to point to any CSS file without touching the plugin source.<\/p><\/dd>\nWhat is the difference between client-side and server-side highlighting?<\/h3><\/dt>\n
Does server-side highlighting work without JavaScript?<\/h3><\/dt>\n
Does Prism.js load on every page?<\/h3><\/dt>\n
wzcbh_force_load_assets<\/code> filter to override this behaviour if needed.<\/p><\/dd>\nHow do I highlight specific lines in a code block?<\/h3><\/dt>\n
1,3-5,8<\/code>). This maps to the data-line<\/code> attribute consumed by the Prism line-highlight plugin.<\/p><\/dd>\nCan I show a filename or label on the code block?<\/h3><\/dt>\n
Does the plugin support dark mode or multiple themes?<\/h3><\/dt>\n
Is this plugin compatible with the WordPress block editor (Gutenberg)?<\/h3><\/dt>\n
Where do I report security bugs found in this plugin?<\/h3><\/dt>\n
1.2.0 (6 August 2026)<\/h4>\n\n
\n
wzcbh_file_tab_html<\/code> filter to customise the file name tab markup.<\/li>\nsnippet.{ext}<\/code> derived from its language. Enabled by default; it can be turned off globally with the new \"Download Snippet\" setting, or per block from the \"Download button\" control in the block sidebar.<\/li>\nwzcbh_download_extensions<\/code> filter to customise the language-to-file-extension map used for downloads.<\/li>\ntitle<\/code> attribute on the <pre><\/code>) are now displayed on the frontend without needing the post to be re-saved.<\/li>\nbackground: window<\/code> from the forced-colors media query in several themes, which left the editor code block unstyled.<\/li>\n<\/ul>\n\n1.1.0 (10 June 2026)<\/h4>\n\n