mohamad wael

<p>A syntax highlighter using PrismJs.</p>
<h3>How To Use</h3>
<p>Wrap your pre tag as shown below:</p>
<pre>
[sh_prismjs_pre class="language-py line-numbers match-braces rainbow-braces" data_line="1,4-5,7" escape_html='escape']
<pre>    
class Implements_Ne:
    ''' A class which implements 
        the __ne__ method '''
    def __ne__( self, other):
        return False

class Not_Implements_Ne:
    ''' A class which does not
        implement the __ne__
        method '''
    pass
</pre>
[/sh_prismjs_pre]
</pre>
<ul>
<li>Replace name in language-NAME, by the name of the language that you wish to highlight. For example if the language is python, language-NAME should become language-py .</li>
<li>If you wish line numbers to appear, use line-numbers . </li>
<li>If you wish braces to be matched when selected use match-braces . </li>
<li>If you wish to have rainbow braces use rainbow-braces . </li>
<li>If you wish to highlight lines, you can use data_line, so in the example provided, colorize line 1, and colorize lines from 4 to 5, and colorize line 7. </li>
<li>If you wish the content of the pre to be escaped, so for example if it contains html tags that you do not wish to be rendered, you can use escape_html=’escape’</li>
</ul>
<p>For code tags, they also should be wrapped as follows:</p>
<pre>
[sh_prismjs_code class="language-html" escape_html='escape']<code>tag: <br/></code>[/sh_prismjs_code]
</pre>
<p>You must use the language-Name option, and you can use the escape_html option.</p>


Syntax Highlighter with PrismJS

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.

Syntax Highlighter with PrismJS vs WebberZone Code Block Highlighting