Luis Sacristán

<p>Allows to add snippets blocks to your content: Javascript, CSS, HTML…</p>
<h3>Purpose</h3>
<p>Add snippet blocks to your WordPress content using the new Gutenberg editor</p>
<h3>How to use it</h3>
<ul>
<li>Add a Snippet block within your content</li>
<li>Include your code</li>
<li>Select the language</li>
<li>Save the post and check your front-end</li>
</ul>
<h3>Supported languages</h3>
<ul>
<li>Apache</li>
<li>Bash</li>
<li>C#</li>
<li>C++</li>
<li>CSS</li>
<li>Erlang</li>
<li>Go</li>
<li>HTML</li>
<li>XML</li>
<li>Handlebars</li>
<li>JSON</li>
<li>Java</li>
<li>JavaScript</li>
<li>Markdown</li>
<li>Objective C</li>
<li>PHP</li>
<li>Python</li>
<li>R</li>
<li>Ruby</li>
<li>Rust</li>
<li>SCSS</li>
<li>SQL</li>
<li>Shell</li>
<li>Twig</li>
<li>TypeScript</li>
</ul>
<h3>Credits</h3>
<ul>
<li>Based in Making WordPress Do More <a href="https://github.com/mkdo/block-starter-kit" rel="nofollow ugc">Block Starter Kit</a></li>
<li>Original webpack configuration (before modifications) from <a href="https://github.com/zgordon/gutenberg-course" rel="nofollow ugc">Zac Gordon\’s Gutenberg Course</a>.</li>
<li>Original deploy script (before modifications) from <a href="https://github.com/GaryJones/wordpress-plugin-git-flow-svn-deploy" rel="nofollow ugc">Garry Jones</a>.</li>
<li>Webpack HMR thanks to <a href="https://github.com/CGlingener" rel="nofollow ugc">Christian Glingener</a></li>
</ul>
<h3>Requirements</h3>
<p>Gutenberg activated</p>
<h3>Known Issues</h3>
<p>There are no known issues at this time.</p>
<h3>Roadmap</h3>
<ul>
<li>Allow several themes</li>
</ul>


Snippets Block

Allows to add snippets blocks to your content: Javascript, CSS, HTML...

Takashi Fujisaki

<p>Syntax Highlight Nano adds beautiful, customizable syntax highlighting to WordPress’s core code block.<br />
It integrates seamlessly with the Gutenberg editor, providing a consistent look and feel between the editor and the frontend.<br />
Because it extends the existing “Code” block, there is no need for a separate custom block or switching between different block types.<br />
This plugin is built on top of <strong>highlight.js</strong>, ensuring accurate and performant syntax highlighting for a wide variety of languages.</p>
<h4>Features</h4>
<ul>
<li><strong>Automatic language detection</strong>: Intelligently detects the programming language of your code.</li>
<li><strong>Customizable header</strong>: Optionally display a header above the code block with a filename or language name.</li>
<li><strong>Line numbers</strong>: Toggle line numbers on or off to improve code readability.</li>
<li><strong>Copy to clipboard button</strong>: A convenient button appears on hover, allowing users to copy the code with a single click.</li>
<li><strong>Lightweight and performant</strong>: Uses highlight.js for efficient, optimized syntax highlighting.</li>
<li><strong>WordPress best practices</strong>: Built following WordPress development standards.</li>
</ul>
<h4>How to Use</h4>
<ol>
<li>Install and activate the plugin.</li>
<li>In the WordPress editor, add a standard “Code” block.</li>
<li>Enter your code.</li>
<li>In the block settings sidebar, you can:
<ul>
<li>Select a programming language (or leave it for automatic detection).</li>
<li>Add a filename.</li>
<li>Toggle header visibility.</li>
<li>Toggle line number visibility.</li>
</ul>
</li>
<li>The code block will be automatically highlighted on the frontend.</li>
</ol>
<h3>Privacy</h3>
<p>This plugin does not collect any personal data. It does not set cookies or connect to external services. All processing happens locally on your server and in the user’s browser.</p>
<h3>Credits</h3>
<p>This plugin uses highlight.js (BSD 3‑Clause License).<br />
Copyright (c) 2006, Ivan Sagalaev<br />
https://github.com/highlightjs/highlight.js</p>
<h3>Support</h3>
<p>For support, feature requests, and bug reports, please visit:<br />
https://github.com/takashifujisaki/syntax-highlight-nano/issues</p>


Syntax Highlight Nano

Adds modern syntax highlighting to WordPress's standard code block using the robust highlight.js library.

Snippets Block vs Syntax Highlight Nano