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.

David

<p>Brings the cool Javascript syntax highlighter <a href="https://github.com/ccampbell/rainbow" rel="nofollow ugc">Rainbow.js</a> to your WordPress-Blog and allows you to manage code snippets independend from the text editor.</p>
<p><strong>IMPORTANT! – This plugin is no longer testet with PHP 5.2!</strong></p>
<h4>Quick Start</h4>
<ol>
<li>Download the plugin from this page</li>
<li>Follow the instructions on the <a href="https://codex.wordpress.org/Managing_Plugins#Manual_Plugin_Installation" rel="nofollow ugc">WordPress Codex</a> to install the plugin.<br />
By default, the plugin is ready for use after activation. Some options can be changed on Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Writing.</li>
</ol>
<p>For a detailed usage manual refer to the  <a href="https://wordpress.org/extend/plugins/wp-colored-coding/other_notes/#usage" rel="ugc">Usage section</a>, or – better than a thousand words – to the <a href="https://wordpress.org/extend/plugins/wp-colored-coding/screenshots/" rel="ugc">screenshots</a>.</p>
<p>If you want to change the behaviour of the plugin see the <a href="https://wordpress.org/extend/plugins/wp-colored-coding/other_notes/#API" rel="ugc">API-Documentation</a></p>
</p>
<h3>Settings</h3>
<p>By default, the plugin is ready for use after activation. Some options can be changed on Settings <span aria-hidden="true" class="wp-exclude-emoji">→</span> Writing.</p>
<h4>Raw output</h4>
<p>This option enables an additional checkbox for each codeblock of a post which allows you to disable the <code>esc_attr()</code> filter for that code snippet. That means, every HTML and Javascript inside this textarea will be parsed by the browser as those. So be carefull with this option.</p>
<h3>Usage</h3>
<h4>Codeblocks</h4>
<p>A single Codeblock is identified (in the posts context) by its name. If you don’t want to specify a name for each block, leave it empty, it will be generated automatically.</p>
<p>The language field is also optional. To use syntax highlighting, write in a rainbow supported language. (It will give you suggestions.) Currently these are<br />
* C<br />
* Coffeescript<br />
* C#<br />
* CSS<br />
* Go<br />
* HTML<br />
* Java<br />
* JavaScript<br />
* Lua<br />
* PHP<br />
* Python<br />
* R<br />
* Ruby<br />
* Shell<br />
* Smalltalk</p>
<p>Each codeblock can be placed anywhere in the text by using the shortcode <code>[cc name="{name}"]</code>. You can use the TinyMCE button »CC« for that.</p>
<h4>Shortcode (in-text code)</h4>
<p>For just a few lines of code you may want to use the shortcode like this:</p>
<pre><code>[cc lang="javascript"]
var str = 'Hello World';
alert( str );
[/cc]
</code></pre>
<h3>Contribution & Bug-Report</h3>
<p>For bug reports or ideas for new features, please use the <a href="https://github.com/dnaber-de/WP-Colored-Coding/issues" rel="nofollow ugc">issue tracker on gitub</a>.</p>
<h3>API</h3>
<p>The following filters are provided:</p>
<ul>
<li><code>wp_cc_rainbow_themes</code></li>
<li><code>wp_cc_rainbow_scripts</code></li>
<li><code>wp_cc_rainbow_languages</code></li>
</ul>
<p>Adding a new Theme is quite easy. Just expend the themes-array by a key like this</p>
<pre><code>/**
 * @param array $themes
 * @return array
 */
function my_new_rainbow_theme( $themes ) {
    $themes[ 'my_theme' ] = array(
        'src'  => //the absolute URI to the stylesheet
        'name' => 'My Theme'
    );

    return $themes;
}
add_filter( 'wp_cc_rainbow_themes', 'my_new_rainbow_theme' );
</code></pre>
<p>To add a supported language use</p>
<pre><code>/**
 * @param array $scripts
 * @return array
 */
function my_new_rainbow_script( $scripts ) {
    $scripts[ 'my_new_lang' ] = array(
        'src'       => //the absolute URI to the script
        'depth'     => array( 'rainbow' ),
        'lang'      => 'my_new_lang',
        'in_footer' => TRUE # this must be equal with the script it depends on
    );

    # to override the built-in rainbow version use the key 'rainbow'

    return $scripts;
}
add_filter( 'wp_cc_rainbow_scripts', 'my_new_rainbow_script' );

/**
 * @param array $langs
 * @return array
 */
function my_new_lang( $langs ) {

    $langs[ 'my_new_lang' ] = 'My new lang';

    return $langs;
}
add_filter( 'wp_cc_rainbow_languages', 'my_new_lang' );
</code></pre>
<h4>Deactivation/Uninstallation</h4>
<p>If you deactivate the plugin all settings and codes will be preserved. On uninstallation (delete), all settings and codes will be deleted finally. If this is triggered from the network-admin page, all blogs will be cleaned up.</p>
<h3>Acknowledgement</h3>
<ul>
<li>Thanks to <a href="https://github.com/sparanoid" rel="nofollow ugc">sparanoid</a> for chinese translation</li>
<li>Thanks to <a href="https://twitter.com/Volleyballfisch" rel="nofollow ugc">@volleyballfisch</a> for spanish translation</li>
<li>Thanks to <a href="https://github.com/yonjah" rel="nofollow ugc">yonjah</a> for JS Bugfixing</li>
</ul>


4WP Advanced Code vs WP Colored Coding