WebberZone

Ajay

<p><strong>WebberZone Code Block Highlighting</strong> is the easiest way to add syntax highlighting to your WordPress site. It extends the native Gutenberg <code>core/code</code> block with <a href="https://prismjs.com/" rel="nofollow ugc">Prism.js</a> highlighting — no shortcodes, no block replacement, no risk of breaking existing posts.</p>
<p>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>
<h3>Two highlighting modes</h3>
<p>Pick the rendering mode that best fits your site from the settings page:</p>
<ul>
<li><strong>Client-side (default)</strong> — <a href="https://prismjs.com/" rel="nofollow ugc">Prism.js</a> highlights your code in the browser. Best for interactive features such as copy-to-clipboard and expand/collapse.</li>
<li><strong>Server-side (highlight.php)</strong> — Code is pre-highlighted on the server with <a href="https://github.com/scrivo/highlight.php" rel="nofollow ugc">highlight.php</a>, so no Prism.js or any other JavaScript is loaded for highlighting. Ideal for performance, Core Web Vitals, AMP-style setups, and strict content-security policies.</li>
</ul>
<p>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>
<h3>Why use this plugin?</h3>
<ul>
<li><strong>Safe by design</strong> — Works as a filter on top of <code>core/code</code>. Existing posts are never invalidated. Deactivate the plugin and your blocks are still valid standard WordPress code blocks.</li>
<li><strong>Zero configuration</strong> — Activate and start writing. No setup wizard, no shortcodes.</li>
<li><strong>No highlighting JavaScript in server mode</strong> — Server-side mode pre-renders syntax colours on the server. No Prism.js or any other JavaScript is enqueued for highlighting.</li>
<li><strong>Smart asset loading</strong> — Theme CSS (and, in client mode, Prism JS) only load on pages that actually contain code blocks. Pages without code stay fast.</li>
<li><strong>Per-block controls</strong> — Set language, theme, line numbers, word wrap, title, highlighted lines, and max height individually for each block.</li>
<li><strong>Developer-friendly</strong> — Filters to add languages, override themes, and force asset loading.</li>
</ul>
<h3>Supported languages</h3>
<p>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 <code>wzcbh_languages</code> filter to add or remove entries from the language picker.</p>
<h3>Included themes (21)</h3>
<p>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>
<h3>Per-block features</h3>
<ul>
<li><strong>Language selector</strong> — Choose the programming language from the sidebar; applies the correct Prism grammar automatically.</li>
<li><strong>Line numbers</strong> — Toggle line numbers per block, with a configurable start line.</li>
<li><strong>File title / label</strong> — Add an optional filename or label displayed in the code block toolbar.</li>
<li><strong>Highlight lines</strong> — Specify lines or ranges (e.g. <code>1,3-5</code>) to visually highlight using Prism’s line-highlight plugin.</li>
<li><strong>Max height with expand/collapse</strong> — Set a maximum height in pixels; an expand/collapse toolbar button appears automatically.</li>
<li><strong>Word wrap</strong> — Toggle soft word wrapping per block.</li>
</ul>
<h3>Global settings</h3>
<ul>
<li>Highlighting mode — client-side (Prism.js) or server-side (highlight.php)</li>
<li>Default colour scheme (theme)</li>
<li>Default language</li>
<li>Default line numbers toggle and start value</li>
<li>Default word wrap</li>
<li>Copy-to-clipboard button</li>
<li>Show language label in toolbar</li>
<li>Font size</li>
</ul>
<h3>Developer filters</h3>
<ul>
<li><code>wzcbh_languages</code> — Filter the language list array (<code>slug => label</code>)</li>
<li><code>wzcbh_color_scheme_css_url</code> — Override the Prism theme CSS URL</li>
<li><code>wzcbh_force_load_assets</code> — Force Prism assets to load on every page</li>
</ul>
<h3>GDPR</h3>
<p>WebberZone Code Block Highlighting does not collect personal data, set cookies, or communicate with any external services.</p>
<h3>Contribute</h3>
<p>The plugin is open source and available on <a href="https://github.com/WebberZone/webberzone-code-block-highlighting" rel="nofollow ugc">GitHub</a>. Pull requests for bug fixes and new features are welcome. Please use the <a href="https://wordpress.org/support/plugin/webberzone-code-block-highlighting/" rel="ugc">WordPress.org support forum</a> for support and <a href="https://github.com/WebberZone/webberzone-code-block-highlighting/issues" rel="nofollow ugc">GitHub Issues</a> for confirmed bug reports.</p>
<h3>Translations</h3>
<p>Help translate WebberZone Code Block Highlighting into your language on <a href="https://translate.wordpress.org/projects/wp-plugins/webberzone-code-block-highlighting" rel="nofollow ugc">WordPress.org</a>. See the <a href="https://make.wordpress.org/polyglots/handbook/rosetta/theme-plugin-directories/" rel="nofollow ugc">Translator Handbook</a> for guidance.</p>
<h3>Other plugins by WebberZone</h3>
<ul>
<li><a href="https://wordpress.org/plugins/contextual-related-posts/" rel="ugc">Contextual Related Posts</a> — Display fast, intelligent related posts to keep visitors on your site longer</li>
<li><a href="https://wordpress.org/plugins/top-10/" rel="ugc">Top 10</a> — Track daily and total visits and display popular and trending posts</li>
<li><a href="https://wordpress.org/plugins/add-to-all/" rel="ugc">WebberZone Snippetz</a> — Manage custom HTML, CSS and JS snippets across your site</li>
<li><a href="https://wordpress.org/plugins/knowledgebase/" rel="ugc">Knowledge Base</a> — Create a knowledge base or FAQ section on your WordPress site</li>
<li><a href="https://wordpress.org/plugins/better-search/" rel="ugc">Better Search</a> — Contextual search results sorted by relevance</li>
<li><a href="https://wordpress.org/plugins/autoclose/" rel="ugc">Auto-Close</a> — Automatically close comments, pingbacks, trackbacks and manage revisions</li>
<li><a href="https://wordpress.org/plugins/popular-authors/" rel="ugc">Popular Authors</a> — Display popular authors in a WordPress widget</li>
<li><a href="https://wordpress.org/plugins/where-did-they-go-from-here/" rel="ugc">Followed Posts</a> — Show related posts based on what your visitors have already read</li>
<li><a href="https://wordpress.org/plugins/webberzone-link-warnings/" rel="ugc">WebberZone Link Warnings</a> — Add accessible warnings for external links and target=”_blank” links</li>
</ul>


WebberZone Code Block Highlighting

Syntax highlighting for the Gutenberg Code block — Prism.js, 21 themes, 40+ languages, plus an optional server-side highlighting mode.

Dan D

<p>Codeblocks Extended with PrismJS was born of a personal need for a lightweight code highlighter, with special functionality.<br />
Many of the other PrismJS based plugins in the repository were either outdated, or were lacking features that I was looking for.</p>
<p>Features:</p>
<ul>
<li>Integrates the latest PrismJS build, with the most common langauges used.</li>
<li>Integrates the PrismJS line-numbers plugin, to automatically number lines of code.</li>
<li>Integrates the PrismJS line-highlight plugin to allow you to highlight specific lines of code.</li>
<li>Integrates ClipboardJS + custom jQuery to add a “Copy to Clipboard” button to each code block.</li>
<li>Custom Text Editor button to wrap selected text with the most commmon <code><pre></code> and <code><code></code> classes, and replacing special characters with their HTML safe equivalents.</li>
<li>Custom Visual Editor / TinyMCE dropdown button, with the most common languages to wrap selected text.</li>
<li>Since this works via wrapping <code><pre></code> and <code><code></code> tags with classes, you can use all custom class settings that PrismJS offers.</li>
<li>No shortcodes to mess with, so you don’t have to worry about losing whitespace between editor modes.</li>
<li>No settings page needed: Just activate it and go!</li>
</ul>
<p>For a full list of languages supported and more information on this plugin’s use, please check out the FAQ.</p>
<p>Note: This does NOT auto-detect the language. Most plugins that do so brute force the languages or require file extensions, resulting in a much heavier plugin. The decision was made to keep this as light-weight as possible.</p>
<p>Note 2: This is designed to work with the Classic Editor. It does not currently work in Gutenberg blocks.</p>
<p>Thanks to Mike @ <a href="https://wp-bullet.com/" rel="nofollow ugc">WP Bullet</a> for the banner and icon.</p>


Codeblocks Extended with PrismJS

Codebocks Extended with PrismJS includes syntax highlighting, copy to clipboard, and Visual + Text editor integration.

WebberZone Code Block Highlighting vs Codeblocks Extended with PrismJS