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 Language, with 56 Different Themes.

The Code Block is dependent on a CodeMirror library.

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.

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

New features include

  • (New) Control Panel Added on top of the Code Block.
    ** It displays language/filename.
    ** It also display three buttons, includes Run/Execute, FullScreen, Copy Code.
  • (New) Web editor (Execution of HTML, CSS JavaScript block) With CodeMirror Block 1.1
  • (Updated) Code block is now CodeMirror Block 1.1
  • (New) Option Page for set default options
  • (New) Highlight Active Line (now available on CodeMirror Block 1.1)
  • (New) CodeMirror Block 1.1 now support Block align (Wide Width, Full Width) if your theme Supports.
  • (New) Classic Editor Support (Partial)


  • Lightweight and fast
  • Secure code with using clear coding standards
  • Intuitive interface with many settings
  • Cross browser compatible (work smooth in any modern browser)
  • Works also on android mobile browser
  • Compatible with all Default WordPress themes (tested with Latest Twenty Twenty)

Key features include

  • Code syntax highlighting
  • Line number (On/Off) option
  • 56 Themes (all provided themes from CodeMirror)
  • 100+ Programming languages (all most 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 (Block Editor).
  • Paste CODE and Select appropriate Language to highlight CODE (Block Editor).
  • Change Theme from 50+ different themes, with live Preview (Block Editor).
  • Toggle Line Number with one click (Block Editor).


這個外掛提供 1 個可供 Gutenberg/區塊編輯器使用的區塊。

CodeMirror Blocks


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 Supports Classic Editor?

Yes, Now it supports classic editor. So, works with tinyMCE editor. But it not support live syntax highlighting.

Q. It is Run without Gutenberg?

Yes, But if you want get live syntax highlighting, you have to install and activate Gutenberg, or Update your WordPress to latest version 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 display 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 toggle button to (On/Off) it.

Q. How to enable or disable Highlight Active Line?

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

Q. How to enable or disable Warp Long Line?

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

Q. How to enable Execute Button (Beta)?

A. Execute the code is currently in beta testing, if you want to enable it,
1. Log in to Admin Area of your WordPress website.
2. Go to CodeMirror Blocks Options Page.
3. Scroll Down and Find (Beta) Output Block
4. Check Yes Enable Execution Button? You can also set Execute Button Text.
5. Now, Go to Editor and select any Code Block and Set Editable on Frontend? option to (On or Yes).
6. Please Note that Code Block have Web Languages such as (HTML, CSS, or Javascript) Language/Mode, will only have Execute Button.

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 CodeMirror Block 1.1, 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.


2020 年 9 月 2 日
I rarely give rate to a plugin. But I have to do for this one. I have been looking for the best syntax highlighter for a while. This is the best one I see on the market. It pays to own this plugin.
2020 年 6 月 13 日
Worked immediately, I'm using the plugin on my development blog. I added a filter to facilitate displaying code from remote URL's (GitHub), the code itself is great, very easy to navigate.
2020 年 3 月 27 日
This is what exactly I was looking for. Quick to setup and easy to use.
2020 年 3 月 19 日
I love the plugin. Even the missing feature of proper highlighting Gherkin syntax Given, When, Then etc. does not stop me from appreciating the work. The plugin is simple and probably has enough features to suit everyone who needs great looking and behaving code blocks. 5 stars.
閱讀全部 26 則使用者評論


以下人員參與了開源軟體〈CodeMirror Blocks〉的開發相關工作。


CodeMirror Blocks 外掛目前已有 2 個本地化語言版本。 感謝全部譯者為這個外掛做出的貢獻。

將 CodeMirror Blocks 外掛本地化為台灣繁體中文版


任何人均可瀏覽程式碼、查看 SVN 存放庫,或透過 RSS 訂閱開發記錄






  • Added: New Panel Added on top of Code Block.

It Contains Language label witch display language used in block

Three Buttons
1. Run/Execute Button Requested
1. Full Screen Button
1. Copy Code Button Requested
* Added: Enable Code Block on Home page Requested
* Fix: Codeblock Display Issue




  • Fix: Typo on Settings Page.


  • Update: Now with CodeMirror Block it is more optimized and have new features.
  • Add: Option Page for set default options. Suggested
  • Add: Support for Classic Editor Suggested
  • Optimized: Now, CodeMirror Block js and css files will only load if needed Suggested
  • Beta Add: Button for Execute code only works on HTML, CSS and JavaScript type code block Suggested
  • Fix: With Autoptimize it breaks some JavaScript. Suggested


  • Update: Suggested Code.


  • Add: Added 2 Event Listeners wpcm_editor_loaded and wpcm_editors_loaded


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


  • Change: minor changes.


  • Improve: Performance.
  • Add: Some Suggested 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.