Vicky Agravat

<p>CodeMirror Blocks is useful for developers blog, tutorial site where to display formatted (highlighted) code of any program.<br />
It supports 100+ Programming, Scripting and MarkUp Language, with 56 Different Themes.</p>
<p>The Code Block is dependent on a <a href="https://codemirror.net/" rel="nofollow ugc">CodeMirror</a> library.</p>
<p>Formatted Code Block is like (syntax highlighting feature) that displays source code, in different colors and fonts according to the category of terms. It is one strategy to improve the readability and context of the text; especially for code that spans several pages. The reader can easily ignore large sections of comments or code, depending on what they are looking for.</p>
<p>This plugin is just plug and play, no tedious configurations or hacks, just install, activate and start using block inserter.</p>
<p><strong>Features</strong></p>
<ul>
<li>Control Panel Added on top of the Code Block.<br />
** It displays language/filename.<br />
** It also display three buttons, includes Run/Execute, FullScreen, Copy Code.</li>
<li>Web editor (Execution of HTML, CSS JavaScript block) With CodeMirror Block 1.1</li>
<li>Option Page for set default options</li>
<li>Highlight Active Line (now available on CodeMirror Block 1.1)</li>
<li>CodeMirror Block 1.1 now support Block align (Wide Width, Full Width) if your theme Supports.</li>
<li>
<p>Classic Editor Support (Partial)</p>
</li>
<li>
<p>Lightweight and fast</p>
</li>
<li>Secure code with using clear coding standards</li>
<li>Intuitive interface with many settings</li>
<li>Cross browser compatible (work smooth in any modern browser)</li>
<li>Works also on android mobile browser</li>
<li>Compatible with all Default WordPress themes (tested with Latest Twenty Twenty-Four)
<ul>
<li>Twenty Twenty-Four</li>
<li>Twenty Twenty-Three</li>
<li>Twenty Twenty-Two</li>
<li>Twenty Twenty-One</li>
<li>Twenty Twenty</li>
</ul>
</li>
<li>Also Compatible with other third-party themes.</li>
</ul>
<p><strong>Key features include</strong></p>
<ul>
<li>Code syntax highlighting</li>
<li>Line number (On/Off) option</li>
<li>56 Themes (all provided themes from CodeMirror)</li>
<li>100+ Programming languages (all most provided languages from CodeMirror)</li>
<li>Programming language selection option</li>
<li>Loading CodeMirror files on pages only when needed</li>
</ul>
<p><strong>A list of supported themes:</strong></p>
<ul>
<li>3024 day</li>
<li>3024 night</li>
<li>Ambiance mobile</li>
<li>Ambiance</li>
<li>Base16 dark</li>
<li>Base16 light</li>
<li>Blackboard</li>
<li>Cobalt</li>
<li>Colorforth</li>
<li>Eclipse</li>
<li>Elegant</li>
<li>Erlang dark</li>
<li>Lesser dark</li>
<li>Liquibyte</li>
<li>MBO</li>
<li>MDN-like</li>
<li>Midnight</li>
<li>Monokai</li>
<li>Neat</li>
<li>Neo</li>
<li>Night</li>
<li>Paraiso dark</li>
<li>Paraiso light</li>
<li>Pastel on dark</li>
<li>Rubyblue</li>
<li>Reactjs.org Theme</li>
<li>Solarized</li>
<li>The matrix</li>
<li>Tomorrow night bright</li>
<li>Tomorrow night eighties</li>
<li>TTCN</li>
<li>Twilight</li>
<li>Vibrant ink</li>
<li>XQ dark</li>
<li>XQ light</li>
<li>Zenburn</li>
</ul>
<h3>Credits</h3>
<ul>
<li>This Plugin use CodeMirror library to highlight <code>Code Blocks</code>. <a href="https://codemirror.net/" rel="nofollow ugc">CodeMirror</a> is an open-source project shared under the <a href="https://codemirror.net/LICENSE" rel="nofollow ugc">MIT license</a>.</li>
</ul>


CodeMirror Blocks

Thanks for creating this great tool. It solves my problem. It works as you have described. I love the preview running option. Great work. Keep rocking, brother. 

Perfect Syntax Highliter with Preview Mode

Top great work!


Good plugin, thanks for sharing. I have question I know you removed the run/execute button for HTML, CSS and JavaScript due to security issue XSS. but are you willing to add again after fixing it maybe?


Good plugin

CodeMirror Blocks is useful for tutorial site where display formatted (highlighted) code block. With support of 100+ Language/Mode and 56 Themes.

snowbedding

<p><a href="https://www.tiptinker.com/easy-syntax-highlighter-wordpress-plugin/" rel="nofollow ugc">Easy Syntax Highlighter</a> is a powerful WordPress plugin that helps improve your website’s code presentation by providing beautiful syntax highlighting. Using the latest Highlight.js library, it supports over 20 programming languages with 80+ color themes, copy-to-clipboard functionality, and seamless integration with both classic and Gutenberg editors.</p>
<h3>Features</h3>
<ul>
<li><strong>Modern Highlight.js Engine</strong>: Uses the latest Highlight.js library for fast, accurate syntax highlighting</li>
<li><strong>80+ Themes Included</strong>: Over 80 themes for both light and dark modes, all stored locally for offline compatibility</li>
<li><strong>Unlimited Language Support</strong>: Supports 20+ programming languages including JavaScript, PHP, Python, CSS, HTML, SQL, Bash, and more</li>
<li><strong>Modern JavaScript</strong>: Promise-based loading with proper error handling and performance optimizations</li>
<li><strong>Performance Optimized</strong>: Smart asset loading—only loads when code blocks are present on the page</li>
<li><strong>Security Focused</strong>: Proper input sanitization and output escaping</li>
<li><strong>Admin Interface</strong>: Clean, modern settings page with visual theme selector integrated with WordPress admin</li>
<li><strong>Localization Ready</strong>: Translation-ready with proper text domains</li>
<li><strong>Backward Compatible</strong>: Automatic migration from old plugin versions</li>
</ul>
<h3>How to Use</h3>
<ol>
<li><strong>Gutenberg Block Editor</strong>: Use the default WordPress “Code” block. The plugin automatically detects the language and highlights it. There is no language setting in the sidebar; detection is automatic. If you need to force a language, edit the block as HTML and add a class to the <code><code></code> element (e.g., <code><code class="language-php"></code>).</li>
<li><strong>Classic Editor</strong>: Use the TinyMCE button (code icon) with the modal dialog for easy code insertion.</li>
<li><strong>Copy to Clipboard</strong>: Double-click any code block to instantly copy its content with visual feedback.</li>
</ol>
<h3>Use Cases</h3>
<ul>
<li>Technical blogs and tutorials</li>
<li>Documentation websites</li>
<li>Programming courses and educational content</li>
<li>Developer portfolios</li>
<li>API documentation</li>
<li>Code examples and snippets</li>
</ul>
<h3>Support</h3>
<p>For support, bug reports, or feature requests, please visit: <a href="https://github.com/tiptinker/easy-syntax-highlighter" rel="nofollow ugc">Github</a></p>
<h3>Contributing</h3>
<p>Contributions are welcome! Please feel free to submit pull requests or open issues on GitHub.</p>
<h3>License</h3>
<p>This plugin is licensed under the GPLv2 or later.<br />
License URI: https://www.gnu.org/licenses/gpl-2.0.html</p>


Easy Syntax Highlighter

Modern, lightweight syntax highlighter for WordPress using Highlight.js

CodeMirror Blocks vs Easy Syntax Highlighter