CodeMirror Blocks


CodeMirror Blocks is useful for developers blog, tutorial site where to display formatted (highlighted) code of any program.
It supports 100+ Programming, Scripting and MarkUp Languge, with 56 Different Themes.

The Code Block is dependent on a CodeMirror library.

Formated 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.

This plugin is just plug and play, no tedious configurations or hacks, just install, activate and start using block inserter.


  • Lightweight and fast
  • Secure code with using clear coding standards
  • Intuitive interface with many settings
  • Cross browser compatible (work smooth in any modern browser)
  • Compatible with all WordPress themes

Key features include

  • Code syntax highlighting
  • Line number (On/Off) option
  • 56 Themes (all provided themes from CodeMirror)
  • 100+ Programming languages (allmost provided languages from CodeMirror)
  • Programming language selection option
  • Loading CodeMirror files on pages only when needed

A list of supported themes:

  • 3024 day
  • 3024 night
  • Ambiance mobile
  • Ambiance
  • Base16 dark
  • Base16 light
  • Blackboard
  • Cobalt
  • Colorforth
  • Eclipse
  • Elegant
  • Erlang dark
  • Lesser dark
  • Liquibyte
  • MBO
  • MDN-like
  • Midnight
  • Monokai
  • Neat
  • Neo
  • Night
  • Paraiso dark
  • Paraiso light
  • Pastel on dark
  • Rubyblue
  • Theme
  • Solarized
  • The matrix
  • Tomorrow night bright
  • Tomorrow night eighties
  • TTCN
  • Twilight
  • Vibrant ink
  • XQ dark
  • XQ light
  • Zenburn


  • This Plugin use CodeMirror library to highlight Code Blocks. CodeMirror is an open-source project shared under the MIT license.


  • How to Add CodeBlock.
  • Paste CODE and Select apropriate Language to highlight CODE.
  • Change Theme from 50+ different themes, with live Preview.
  • Toggle Line Number with one click.


Install “CodeMirror Blocks” just as you would any other WordPress Plugin.

Automatically via WordPress Admin Area:

  1. Log in to Admin Area of your WordPress website.
  2. Go to Plugins -> Add New.
  3. Find this plugin and click install.
  4. Activate this plugin through the Plugins tab.

Manually via FTP access:

  1. Download a copy (ZIP file) of this plugin from
  2. Unzip the ZIP file.
  3. Upload the unzipped catalog to your website’s plugin directory (/wp-content/plugins/).
  4. Log in to Admin Area of your WordPress website.
  5. Activate this plugin through the Plugins tab.

More help installing plugins


Q. It is Run without Gutenberg?

No, it is Dependent on Gutenberg to Create Blocks, you have to install and activate Gutenberg, or Update your WordPress to 5.0 with built-in Block Editor.

Q. How to insert Code Block in Post?

A. Adding Code Block is same as inserting other Blocks.

  1. Log in to Admin Area of your WordPress website.
  2. Go to Posts -> Add New.
  3. Click The + button. it dispaly all available Blocks to Insert.
  4. Find or Search Code Block.
  5. Click Code Block to insert in Post.
Q. How to change Language / Mode of Code Block?

A. Just select your Language / Mode from Select Dropdown.

Q. How to change color Theme of Code Block?

A. Just select your theme from Select Dropdown.

Q. How to enable or disable Line Numbers?

A. Just click toogle button to (On/Off) it.

Q. Does this require any knowledge of HTML or CSS?

A. Absolutely not. This plugin can be configured with no knowledge of HTML or CSS, using an easy-to-use Block. But you have to know about code pasted on Code Block, to select proper Language/Mode.

Q. The last WordPress update is preventing me from editing my website that is using this plugin. Why is this?

A. This plugin can not cause such problem. More likely, the problem are related to the settings of the website. It could just be a cache, so please try to clear your website’s cache (may be you using a caching plugin, or some web service such as the CloudFlare) and then the cache of your web browser. Also please try to re-login to the website, this too can help.


October 22, 2019
This is a really good plugin but is not responsive for a mobile screens. Improve this and perfect. thanks
September 19, 2019
I really like the plugin! I switched from advanced gutenberg block to this plugins because of that plugins isn't have the disable copy on frontend features. What a good plugin! Love it! I hope it will add some design features like advanced gutenberg block plugin did! Optimization tips: The current CSS and JavaScript script of this plugin are running everywhere! Hope it will only runs on certain pages that includes the code blocks to increase the page speed for SEO. If we don't use the code block, don't include the JS and CSS file.
August 13, 2019
Thanks for developing this handy plugin. I've tried a few similar plugins, but all of them either had technical issues, were bloated or just didn't look the way I wanted it to look like. WP CodeMirror is different: The code looks awesome, it's nicely integrated in Gutenberg, and it only does what it should. A small tip: Minify the JS that is being loaded on pages that have a code block and try to reduce the file size as much as possible. It's quite heavy for such a small plugin.
July 25, 2019
Very Useful for embedding code blocks within WordPress. Supports multiple languages as well. Syntax highlighting also available. Works perfectly for tutorial sites.
Read all 9 reviews

Contributors & Developers

“CodeMirror Blocks” is open source software. The following people have contributed to this plugin.


Translate “CodeMirror Blocks” into your language.

Interested in development?

Browse the code, check out the SVN repository, or subscribe to the development log by RSS.



  • Update: Sugested Code.


  • Add: Added 2 Event Listners wpcm_editor_loaded and wpcm_editors_loaded


  • Improve: Performance Improved.
  • Update: Sugested Code.


  • Change: minor changes.


  • Improve: Performance.
  • Add: Some Sugested Code.


  • Change: minor changes.


  • Fix: Rust language issue.
  • Fix: simple mode addon for (Docerfile, factor)
  • Fix: htmlembded mode addon for (Embedded Javascript, Embedded Ruby, ASP.NET, Java Server Pages)


  • Created A New Plugin.