Chris Kelley

<p>Honey Code is a Gutenberg Syntax Higlighter Block</p>
<h4>Features</h4>
<ul>
<li>Syntax Highlighting in Gutenberg Post/Page Editor.</li>
<li>Honey Themes that support Fira Code/iScript Font.</li>
<li>Other great themes for Syntax Highlighting and more coming!</li>
</ul>
<h4>Current Themes</h4>
<ul>
<li>Honey</li>
<li>Honey Night</li>
<li>Honey Bright</li>
<li>Tomorrow</li>
<li>Tomrrow Night</li>
</ul>
<h4>Supported Languages</h4>
<ul>
<li>Generic</li>
<li>PHP</li>
<li>HTML</li>
<li>SHELL</li>
<li>SQL</li>
<li>Python</li>
<li>Ruby</li>
<li>CSS</li>
<li>Java</li>
<li>JavaScript</li>
<li>GO</li>
<li>C#</li>
<li>C</li>
</ul>
<p>If you notice any issues with the Syntax Higlighter, please create a ticket on the <a href="https://github.com/chrisakelley/honey-code/issues" rel="nofollow ugc">github repo</a>.</p>


Syntax Highlighting – Honey Code

A Gutenberg block for syntax highlighting.

Alvaro

<p><a href="https://gutenberg-showcase.melonpan.io/melonpan-block-code" rel="nofollow ugc">Demo</a> – <a href="https://melonpan.io/wordpress-plugins/melonpan-block-code" rel="nofollow ugc">Documentation</a> – <a href="https://github.com/garciaalvaro/melonpan-block-code" rel="nofollow ugc">GitHub</a></p>
<p>Block to display code, with highlighted syntax, which can be copied to the clipboard.</p>
<h3>Features</h3>
<p>The block comes with the following settings:</p>
<ul>
<li><strong>Code language</strong>: JavaScript, CSS, PHP, etc. <a href="https://prismjs.com/#languages-list" rel="nofollow ugc">Full list of languages</a>.</li>
<li><strong>Color theme</strong></li>
<li><strong>Label</strong>: Top left label that can be customized. By default the code language.</li>
<li><strong>Copy button</strong>: Top right button to copy the block content.</li>
<li><strong>Padding</strong></li>
<li><strong>Border width</strong> and <strong>Border radius</strong></li>
</ul>
<h3>Usage</h3>
<p>The block can be found inside the blocks inserter menu under the <em>Melonpan Blocks</em> category.<br />
Once added in the post you can edit its settings on the Editor sidebar under the Block settings panel.<br />
Switch between the previewer and editor views to edit the code and see its styled output.</p>


Melonpan Block – Code

Block to display code, with highlighted syntax, which can be copied to the clipboard.

Syntax Highlighting – Honey Code vs Melonpan Block – Code