4wpdev

Anatoliy Dovgun

<p><strong>4WP Advanced Code</strong> enhances <strong>core/code</strong> blocks and provides a dedicated <strong>Advanced Code</strong> block with syntax highlighting, copy and share controls, optional notes, and SoftwareSourceCode JSON-LD for technical content.</p>
<p>A plugin by <a href="https://4wp.dev/" rel="nofollow ugc">4wp.dev</a>. <strong>4WP</strong> is our project brand; the letters “WP” appear only as part of that brand name, not as a reference to WordPress. This plugin is not affiliated with, endorsed, or sponsored by WordPress.</p>
<p>Source code: <a href="https://github.com/4wpdev/4wp-advanced-code" rel="nofollow ugc">github.com/4wpdev/4wp-advanced-code</a></p>
<h4>Key features</h4>
<ul>
<li><strong>Syntax highlighting</strong> — bundled Highlight.js (no CDN on the frontend)</li>
<li><strong>core/code wrapper</strong> — upgrade existing Code blocks without re-entering content</li>
<li><strong>Advanced Code block</strong> — per-block language, theme, copy/share, and SEO fields</li>
<li><strong>JSON-LD</strong> — optional SoftwareSourceCode structured data</li>
<li><strong>Settings</strong> — global defaults under Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> 4WP Advanced Code</li>
</ul>
<h4>Privacy</h4>
<p>Copy and share actions run in the visitor browser. When share opens Twitter or LinkedIn, the visitor leaves your site to those third-party services. No personal data is sent to 4wp.dev.</p>
<h3>Blocks</h3>
<p>This plugin provides 1 block.</p>
<ul>
<li><strong>Advanced Code</strong> — syntax-highlighted code with copy, share, and SEO controls.</li>
</ul>


4WP Advanced Code

Enhanced Code block for Gutenberg with syntax highlighting, copy and share controls, and optional SoftwareSourceCode JSON-LD.

xhtheme

<p>Xhtheme Code Block is a plugin for adding code blocks to your WordPress site, supporting syntax highlighting and adapting to the theme’s light and dark mode switching.</p>
<ul>
<li>Supports syntax highlighting for multiple programming languages.</li>
<li>Allows selection of light, dark, or auto mode.</li>
<li>Supports custom filename display.</li>
</ul>
<h3>External Libraries</h3>
<ul>
<li>
<p><strong>Alpine.js</strong>:</p>
<ul>
<li>Version: 3.x.x</li>
<li>Source: <a href="https://alpinejs.dev/" rel="nofollow ugc">Alpine.js Official Website</a></li>
<li>Description: Alpine.js is a lightweight JavaScript framework for adding interactivity to HTML. It is used in the Xhtheme Code Block plugin to manage the reactive state of the settings page, allowing for dynamic updates and user interactions without the need for page reloads.</li>
</ul>
</li>
<li>
<p><strong>Prism.js</strong>:</p>
<ul>
<li>Version: 1.x.x</li>
<li>Source: <a href="https://prismjs.com/" rel="nofollow ugc">Prism.js Official Website</a></li>
<li>Description: Prism.js is a lightweight, extensible syntax highlighter, built with modern web standards in mind. It is used in the Xhtheme Code Block plugin to provide syntax highlighting for a wide range of programming languages.</li>
</ul>
</li>
</ul>
<h3>Source Code</h3>
<p>The source code for <code>build/index.js</code> can be found in the <code>block-code/src</code> directory.</p>


Xhtheme Code Block

A plugin to add code blocks with syntax highlighting to your WordPress site, and adapt to the theme's light and dark mode switching.

4WP Advanced Code vs Xhtheme Code Block