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.

Marko Krstić

DPlugins

<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/Jec4l5h6pwQ?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span>
<p><strong>Enhanced Code Editor for WordPress</strong> transforms the default WordPress block editor into a powerful development environment tailored for coding and content creation. Built on the robust Monaco Editor, this plugin brings advanced code editing features directly into WordPress, making it an essential tool for developers, designers, and content creators who frequently work with code.</p>
<h3>Key Features:</h3>
<ul>
<li><strong>Rich Code Editing</strong>: Leverage the power of Monaco Editor, renowned for its extensive capabilities including syntax highlighting, intelligent code completion, and seamless user experience.</li>
<li><strong>Emmet Integration</strong>: Speed up your HTML/CSS workflow with built-in Emmet support, allowing you to use shorthand for rapid coding.</li>
<li><strong>Theme Customization</strong>: Toggle between light and dark themes to suit your preference or match your working environment, enhancing visibility and reducing eye strain.</li>
<li><strong>Dynamic Syntax Highlighting</strong>: Easily enable or disable syntax highlighting and choose between light or dark themes to best fit the context of your content.</li>
<li><strong>Flexible Editor Configuration</strong>: Adjust font sizes and choose from various programming languages such as HTML, CSS, JavaScript, PHP, and more, catering to diverse development needs.</li>
<li><strong>Multiple Viewing Modes</strong>: Includes ‘Code’, ‘Preview’, and ‘Split View’ modes, enabling you to code and preview content simultaneously or separately, optimizing your workflow.</li>
</ul>
<h3>Ideal Use Cases:</h3>
<p>This plugin is perfect for:</p>
<ul>
<li><strong>Developers</strong> embedding custom code directly into posts or pages.</li>
<li><strong>Educational platforms</strong> that feature coding tutorials.</li>
<li><strong>Tech bloggers</strong> showcasing programming tips and snippets.</li>
</ul>
<h3>Why Choose Enhanced Code Editor?</h3>
<ul>
<li><strong>Improved Usability</strong>: With an intuitive interface and adjustable settings, this plugin is designed to enhance productivity and ease of use.</li>
<li><strong>Responsive and Adaptive</strong>: Works seamlessly across different devices and screen sizes, ensuring a consistent editing experience everywhere.</li>
<li><strong>Persistent Settings</strong>: Customizations and settings are saved per user, so your environment is the same each time you log in.</li>
</ul>
<p>Embrace a superior coding experience within WordPress with <strong>Enhanced Code Editor</strong>. Whether you’re a professional developer or a hobbyist, this plugin adapts to your needs, making coding within WordPress a delight.</p>


DBlocks CodePro

Advanced Custom HTML Block and Code Syntax Highlightering for sharing code snippets and running code.

Syntax Highlight Nano vs DBlocks CodePro