Title: CodeMirror Blocks Author: Vicky Agravat Published: 2018年12月20日 Last modified: 2024年4月9日 --- プラグインを検索 ![](https://ps.w.org/wp-codemirror-block/assets/banner-772x250.png?rev=3060455) このプラグインは **WordPress の最新3回のメジャーリリースに対してテストされていま せん**。もうメンテナンスやサポートがされていないかもしれず、最新バージョンの WordPress で使用した場合は互換性の問題が発生する可能性があります。 ![](https://ps.w.org/wp-codemirror-block/assets/icon-256x256.png?rev=2001365) # CodeMirror Blocks 作者: [Vicky Agravat](https://profiles.wordpress.org/vickyagravat/) [ダウンロード](https://downloads.wordpress.org/plugin/wp-codemirror-block.2.0.3.zip) [ライブプレビュー](https://ja.wordpress.org/plugins/wp-codemirror-block/?preview=1) * [詳細](https://ja.wordpress.org/plugins/wp-codemirror-block/#description) * [レビュー](https://ja.wordpress.org/plugins/wp-codemirror-block/#reviews) * [インストール](https://ja.wordpress.org/plugins/wp-codemirror-block/#installation) * [開発](https://ja.wordpress.org/plugins/wp-codemirror-block/#developers) [サポート](https://wordpress.org/support/plugin/wp-codemirror-block/) ## 説明 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](https://codemirror.net/) 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. **Features** * Control Panel Added on top of the Code Block. ** It displays language/filename.** It also display three buttons, includes Run/Execute, FullScreen, Copy Code. * Web editor (Execution of HTML, CSS JavaScript block) With CodeMirror Block 1.1 * Option Page for set default options * Highlight Active Line (now available on CodeMirror Block 1.1) * CodeMirror Block 1.1 now support Block align (Wide Width, Full Width) if your theme Supports. * 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- Four) - Twenty Twenty-Four - Twenty Twenty-Three - Twenty Twenty-Two - Twenty Twenty-One - Twenty Twenty * Also Compatible with other third-party themes. **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 * Reactjs.org Theme * Solarized * The matrix * Tomorrow night bright * Tomorrow night eighties * TTCN * Twilight * Vibrant ink * XQ dark * XQ light * Zenburn ### Credits * This Plugin use CodeMirror library to highlight `Code Blocks`. [CodeMirror](https://codemirror.net/) is an open-source project shared under the [MIT license](https://codemirror.net/LICENSE). ## スクリーンショット [⌊How to Add CodeBlock (Block Editor).⌉⌊How to Add CodeBlock (Block Editor).⌉[ How to Add CodeBlock (Block Editor). [⌊Paste CODE and Select appropriate Language to highlight CODE (Block Editor).⌉⌊ Paste CODE and Select appropriate Language to highlight CODE (Block Editor).⌉[ Paste `CODE` and Select appropriate Language to highlight `CODE` (Block Editor). [⌊Change Theme from 50+ different themes, with live Preview (Block Editor).⌉⌊Change Theme from 50+ different themes, with live Preview (Block Editor).⌉[ Change Theme from 50+ different themes, with live Preview (Block Editor). [⌊Toggle Line Number with one click (Block Editor).⌉⌊Toggle Line Number with one click (Block Editor).⌉[ Toggle Line Number with one click (Block Editor). ## ブロック このプラグインは1個のブロックを提供します。 * Codemirror Block CodeMirror Block, It gives you more flexibility to Display formatted Program Code. ## インストール 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 WordPress.org. 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](https://codex.wordpress.org/Managing_Plugins#Installing_Plugins) ## FAQ ### 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. 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 copy paste code on `CodeMirror Block`, and select proper Language/Mode and Theme. ### 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. ## 評価 ![](https://secure.gravatar.com/avatar/20996754f98dbc7ded9c00db327099340af78cc9e613604bb541a789ea4ac587? s=60&d=retro&r=g) ### 󠀁[Good plugin](https://wordpress.org/support/topic/good-plugin-7061/)󠁿 [davidjackson5](https://profiles.wordpress.org/davidjackson5/) 2025年2月16日 A good block plugin. ![](https://secure.gravatar.com/avatar/ce8a6ff43de8c9631e4dd039c072207433d17f191d012e067e4cfb92d44aea60? s=60&d=retro&r=g) ### 󠀁[Good plugin](https://wordpress.org/support/topic/good-plugin-6999/)󠁿 [Amr Abdelkarem](https://profiles.wordpress.org/amrelarabi/) 2024年12月2日 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? ![](https://secure.gravatar.com/avatar/a5c09622e56c69c9aeba370c7da3e0768ccbefd69e4efcf6daa28c9aec37a1ef? s=60&d=retro&r=g) ### 󠀁[Fantastic Plugin](https://wordpress.org/support/topic/fantastic-plugin-1981/)󠁿 [linuxbeast](https://profiles.wordpress.org/linuxbeast/) 2024年6月8日 1 reply Awesome code mirror blocks with syntax highlighting. Perfect for adding code snippets. Highly recommended! ![](https://secure.gravatar.com/avatar/df4f53943eedebce55d851275f7eb0d896c717a1de403e5bca1ba8699bdbaf50? s=60&d=retro&r=g) ### 󠀁[Good plugin for code block](https://wordpress.org/support/topic/good-plugin-for-code-block/)󠁿 [pcskull](https://profiles.wordpress.org/pcskull/) 2024年4月10日 Good plugin for code block ![](https://secure.gravatar.com/avatar/3f91c3c138609fd5a152f7b4bf846ec445af12fde2d173c1f714de17b8537129? s=60&d=retro&r=g) ### 󠀁[Top great work!](https://wordpress.org/support/topic/top-great-work/)󠁿 [minimamente](https://profiles.wordpress.org/minimamente/) 2024年4月9日 Top great work! ![](https://secure.gravatar.com/avatar/fa13dbf11a90b48be54afed737812c9c5340fe37187176d5740f9dc0d59cd505? s=60&d=retro&r=g) ### 󠀁[Very usefull](https://wordpress.org/support/topic/very-usefull-499/)󠁿 [bertrandroussel](https://profiles.wordpress.org/bertrandroussel/) 2023年4月18日 This plugin is very usefull to have a blog about computing development. [ 42件のレビューをすべて表示 ](https://wordpress.org/support/plugin/wp-codemirror-block/reviews/) ## 貢献者と開発者 CodeMirror Blocks はオープンソースソフトウェアです。以下の人々がこのプラグインに 貢献しています。 貢献者 * [ Vicky Agravat ](https://profiles.wordpress.org/vickyagravat/) “CodeMirror Blocks” は2ロケールに翻訳されています。 [翻訳者](https://translate.wordpress.org/projects/wp-plugins/wp-codemirror-block/contributors) のみなさん、翻訳へのご協力ありがとうございます。 [“CodeMirror Blocks” をあなたの言語に翻訳しましょう。](https://translate.wordpress.org/projects/wp-plugins/wp-codemirror-block) ### 開発に興味がありますか ? [コードを閲覧](https://plugins.trac.wordpress.org/browser/wp-codemirror-block/)する か、[SVN リポジトリ](https://plugins.svn.wordpress.org/wp-codemirror-block/)をチェック するか、[開発ログ](https://plugins.trac.wordpress.org/log/wp-codemirror-block/)を [RSS](https://plugins.trac.wordpress.org/log/wp-codemirror-block/?limit=100&mode=stop_on_copy&format=rss) で購読してみてください。 ## 変更履歴 #### 2.0.3 * Fix: [Adding ADDITIONAL CSS CLASS(ES) breaks the code](https://wordpress.org/support/topic/adding-additional-css-classes-breaks-the-code/) * Fix: Extra line at the end of the code. #### 2.0.2 * Fix: [Everything is duplicated](https://wordpress.org/support/topic/everything-is-duplicated) code block rendered twice bug. #### 2.0.1 * Fix: Minor bug #### 2.0.0 * Fix: Cross-Site Scripting issue. See it on [GitHub Advisory](https://github.com/advisories/GHSA-f949-cfvp-v3rg) or [Wordfence](https://www.wordfence.com/threat-intel/vulnerabilities/id/52569aac-1e9e-40fb-9ff4-5eeb7940375d?source=cve) * Removed: Due to Cross-Site Scripting issue, Code Execution functionality (beta functionality) removed. * Removed: Now, Dependency of jQuery is not needed any more. It is written in pure JavaScript. * Feature: Suggested [Vertical Scrollbar with Fixed Width](https://wordpress.org/support/topic/vertical-scrollbar-with-fixed-width/) * Fix: [Cannot show the last 1~2 lines in full screen view](https://wordpress.org/support/topic/cannot-show-the-last-12-lines-in-full-screen-view/) * Fix: [Font side design not working when multiple use](https://wordpress.org/support/topic/font-side-design-not-working-when-multiple-use/) * Fix: [Editing name does not stick…](https://wordpress.org/support/topic/editing-name-does-not-stick/) #### 1.2.4 * Fix: [Deprecated block_categories error](https://wordpress.org/support/topic/deprecated-block_categories-error/) * Fix: [Cannot read properties of undefined (reading ‘toLowerCase’)](https://wordpress.org/support/topic/cannot-read-properties-of-undefined-reading-tolowercase/) * Fix: [Only Displaying Styles for First Code Snippet](https://wordpress.org/support/topic/only-displaying-styles-for-first-code-snippet/) * Fix: [Did’nt work mutipe in one Site](https://wordpress.org/support/topic/didnt-work-mutipe-in-one-site/) * Fix: [Registered with an invalid category](https://wordpress.org/support/topic/registered-with-an-invalid-category/) * Fix: [Deprecated: block_categories](https://wordpress.org/support/topic/deprecated-block_categories-3/) #### 1.2.3 * Fix: [SVG CSS issue.](https://wordpress.org/support/topic/svg-css-issue/) * Fix: [Unwanted animation in html element use](https://wordpress.org/support/topic/unwanted-animation-in-html-element-use/) #### 1.2.2 * Fix: [Undo (Ctrl+Z) command makes the block unusable.](https://wordpress.org/support/topic/undo-ctrlz-command-makes-the-block-unusable/) #### 1.2.1 * Fix: [Problem with “First Line Number” while trying re-editing the post](https://wordpress.org/support/topic/problem-with-first-line-number-while-trying-re-editing-the-post/) #### 1.2.0 * 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](https://wordpress.org/support/topic/how-to-add-a-button-for-executing-the-code-blocks-for-the-user/) 1. Full Screen Button 1. Copy Code Button [Requested](https://wordpress.org/support/topic/how-to-create-copy-to-clipboard-button/)* Added: Enable Code Block on Home page [Requested](https://wordpress.org/support/topic/syntax-highlighting-not-working-on-homepage-of-twenty-seventeen-theme/)* Fix: [Codeblock Display Issue ](https://wordpress.org/support/topic/codeblock-display-issue/) #### 1.1.3 * Fix: Issue [Problems with the default highlighting setting](https://wordpress.org/support/topic/problems-with-the-default-highlighting-setting/) #### 1.1.2 * Fix: Issue [Html code](https://wordpress.org/support/topic/html-code-25/) #### 1.1.1 * Fix: Typo on Settings Page. #### 1.1.0 * Update: Now with CodeMirror Block it is more optimized and have new features. * Add: Option Page for set default options. [Suggested](https://wordpress.org/support/topic/default-code-theme/) * Add: Support for Classic Editor [Suggested](https://wordpress.org/support/topic/shortcode-for-classic-editor/) * Optimized: Now, CodeMirror Block js and css files will only load if needed [Suggested](https://wordpress.org/support/topic/loading-codemirror-files-on-pages-only-when-needed/) * Beta Add: Button for Execute code only works on HTML, CSS and JavaScript type code block [Suggested](https://wordpress.org/support/topic/how-to-add-a-button-for-executing-the-code-blocks-for-the-user/) * Fix: With Autoptimize it breaks some JavaScript. [Suggested](https://wordpress.org/support/topic/works-great-excepting/) #### 1.0.7 * Update: Suggested [Code](https://wordpress.org/support/topic/enqueuing-admin-scripts/). #### 1.0.6 * Add: Added 2 Event Listeners `wpcm_editor_loaded` and `wpcm_editors_loaded` #### 1.0.5 * Improve: Performance Improved. * Update: Suggested [Code](https://wordpress.org/support/topic/editors-2/#post-11274234). #### 1.0.4 * Change: minor changes. #### 1.0.3 * Improve: Performance. * Add: Some Suggested [Code](https://wordpress.org/support/topic/editors-2/). #### 1.0.2 * Change: minor changes. #### 1.0.1 * Fix: [Rust language](https://wordpress.org/support/topic/rust-language/) issue. * Fix: simple mode addon for (Docerfile, factor) * Fix: htmlembded mode addon for (Embedded JavaScript, Embedded Ruby, ASP.NET, Java Server Pages) #### 1.0 * Created A New Plugin. ## メタ * バージョン **2.0.3** * 最終更新日 **2年前** * 有効インストール数 **1,000+** * WordPress バージョン ** 6.0またはそれ以降 ** * 検証済み最新バージョン: **6.5.8** * PHP バージョン ** 7.0またはそれ以降 ** * 言語 * [Chinese (Taiwan)](https://tw.wordpress.org/plugins/wp-codemirror-block/)、[English (US)](https://wordpress.org/plugins/wp-codemirror-block/)、 [German](https://de.wordpress.org/plugins/wp-codemirror-block/). * [プラグインを翻訳](https://translate.wordpress.org/projects/wp-plugins/wp-codemirror-block) * タグ * [Codemirror](https://ja.wordpress.org/plugins/tags/codemirror/)[editor](https://ja.wordpress.org/plugins/tags/editor/) [gutenberg](https://ja.wordpress.org/plugins/tags/gutenberg/)[syntax highlighter](https://ja.wordpress.org/plugins/tags/syntax-highlighter/) * [詳細を表示](https://ja.wordpress.org/plugins/wp-codemirror-block/advanced/) ## 評価 5つ星中5つ星 * [ 41 5-星レビュー ](https://wordpress.org/support/plugin/wp-codemirror-block/reviews/?filter=5) * [ 0 4-星レビュー ](https://wordpress.org/support/plugin/wp-codemirror-block/reviews/?filter=4) * [ 0 3-星レビュー ](https://wordpress.org/support/plugin/wp-codemirror-block/reviews/?filter=3) * [ 0 2-星レビュー ](https://wordpress.org/support/plugin/wp-codemirror-block/reviews/?filter=2) * [ 0 1-星レビュー ](https://wordpress.org/support/plugin/wp-codemirror-block/reviews/?filter=1) [Your review](https://wordpress.org/support/plugin/wp-codemirror-block/reviews/#new-post) [すべてのレビューを見る](https://wordpress.org/support/plugin/wp-codemirror-block/reviews/) ## 貢献者 * [ Vicky Agravat ](https://profiles.wordpress.org/vickyagravat/) ## サポート 意見や質問がありますか ? [サポートフォーラムを表示](https://wordpress.org/support/plugin/wp-codemirror-block/) ## 寄付 このプラグインが今後も改善できるよう応援しませんか ? [ このプラグインに寄付 ](https://paypal.me/VikeshAgravat)