WordPress.org

Taiwan 正體中文

取得 WordPress
WordPress.org

Plugin Directory

CodeMirror Blocks

這個外掛並未在最新的 3 個 WordPress 主要版本上進行測試。開發者可能不再對這個外掛進行維護或提供技術支援，並可能會與更新版本的 WordPress 產生使用上的相容性問題。

CodeMirror Blocks

由 Vicky Agravat 開發
下載
即時預覽

外掛說明

CodeMirror Blocks 對需要顯示格式化 (醒目提示) 程式碼的開發者部落格及教學網站來說，它支援超過 100 種程式語言/模式及 56 種色彩外觀樣式，是一款非常實用的外掛。

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.

外掛功能

  • [CodeMirror] 區塊在區塊頂端會加入 [控制面板]
    ** 可以顯示程式語言名稱/檔案名稱
    ** 可以顯示 3 個按鈕，分別為 [執行]、[全螢幕模式] 及 [複製程式碼] 按鈕
  • 使用 [CodeMirror] 區塊的網頁編輯器 (可執行 HTML、CSS 及 JavaScript)
  • 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.

  • 部分支援傳統編輯器

  • 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
  • 與其他第三方佈景主題相容

外掛主要功能

  • Code syntax highlighting
  • Line number (On/Off) option
  • 56 種外觀樣式 (全部外觀樣式均由 CodeMirror 提供)
  • 超過 100 種程式語言 (全部常見程式語言均由 CodeMirror 提供)
  • Programming language selection option
  • Loading CodeMirror files on pages only when needed

支援的外觀樣式清單

  • 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 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 Block CodeMirror Block, It gives you more flexibility to Display formatted Program Code.

安裝方式

安裝 CodeMirror Blocks 與安裝其他外掛方式相同。

在 WordPress 管理區域自動安裝：

  1. 登入 WordPress 網站的管理區域。
  2. 前往 [外掛]→[安裝外掛]。
  3. 找到這個外掛後點擊 [立即安裝] 按鈕。
  4. 在 [外掛] 頁面啟用這個外掛。

透過 FTP 手動安裝：

  1. 從 WordPress.org 下載這個外掛的安裝套件 ZIP 壓縮檔。
  2. 解壓縮 ZIP 壓縮檔。
  3. 將外掛安裝套件 ZIP 壓縮檔解壓縮所得的 wp-codemirror-block 資料夾上傳至 /wp-content/plugins/ 目錄。
  4. 登入 WordPress 網站的管理區域。
  5. 在 [外掛] 頁面啟用這個外掛。

進一步了解安裝外掛的方式

常見問題集

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. 登入 WordPress 網站的管理區域。
  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.

使用者評論

Good plugin

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?

Fantastic Plugin

2024 年 6 月 8 日 1 則留言
Awesome code mirror blocks with syntax highlighting. Perfect for adding code snippets. Highly recommended!
閱讀全部 42 則使用者評論

參與者及開發者

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

參與者

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

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

對開發相關資訊感興趣？

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

變更記錄

2.0.3

2.0.2

2.0.1

  • Fix: Minor bug

2.0.0

1.2.4

1.2.3

1.2.2

1.2.1

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
1. Full Screen Button
1. Copy Code Button Requested
* Added: Enable Code Block on Home page Requested
* Fix: Codeblock Display Issue

1.1.3

1.1.2

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
  • 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

1.0.7

  • Update: Suggested Code.

1.0.6

  • Add: Added 2 Event Listeners wpcm_editor_loaded and wpcm_editors_loaded

1.0.5

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

1.0.4

  • Change: minor changes.

1.0.3

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

1.0.2

  • Change: minor changes.

1.0.1

  • 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)

1.0

  • Created A New Plugin.

中繼資料

評分

5 星，滿分為 5 星

新增使用者評論

查看全部使用者評論

技術支援

使用者可在技術支援論壇提出意見反應或使用問題。

檢視技術支援論壇

贊助

想要支援這個外掛的發展嗎？

贊助這個外掛