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.

Andreas Hecht

<p>Really simple to use and extrem lightweigt Code Highlighting with 8 different code highlighting themes. You can highlight your code with or without line numbers. It is based on Lea Verou’s <a href="http://prismjs.com/" title="Prism.js" rel="nofollow ugc">Prism.js</a>. Prism is used on several big websites like the Smashing Magazine, A list Apart, CSS Tricks, SitePoint and Drupal, because it is fast, simple and lightweight.</p>
<p>AH Code Highlighter supports PHP, HTML, CSS, JavaScript, Apache, HTTP, Sess, Lass, Markdown, Nginx, MySql, Xml, Mathml, JSON, Git, C, C# und C++ and more…</p>
<h3>Demo</h3>
<p>You can find a demo of the plugin on the plugin homepage: <a href="https://andreas-hecht.com/prism-syntax-highlighter/" title="AH Code Highlighter" rel="nofollow ugc">Plugin Homepage</a></p>
<h4>Basic Usage</h4>
<p>Install and activate the plugin. Select your favorite Highlight Theme on the Options page (Settings => AH Code Highlighter). When you write a new post, click on the Code button, choose the code language and insert your code. Click OK and you’re done.</p>


AH Code Highlighter

The easiest to use code highlighting ever. Choose between 8 different color themes to highlight your code snippets. Many programming languages are sup …

Melonpan Block – Code vs AH Code Highlighter