hbgl

<p>A WordPress plugin that provides a Gutenberg block for displaying computer source code with syntax-highlighting. Uses <a href="https://highlightjs.org/" rel="nofollow ugc">highlight.js</a> under the hood.</p>
<ul>
<li>✅ Supports 192 languages</li>
<li>✅ 256 included themes</li>
<li>✅ Server rendered static HTML</li>
<li>✅ Zero JS runtime dependencies</li>
<li>✅ Dynamic light/dark mode based on <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme" rel="nofollow ugc">preferred color scheme</a></li>
</ul>


Code Syntax Highlighting Block

A Gutenberg block for syntax-higlighted code.

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>


Code Syntax Highlighting Block vs WP Colored Coding