[WordPress] 外掛分享： CodeMirror Blocks

WordPress 外掛 CodeMirror Blocks 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「CodeMirror Blocks」是 2018-12-19 上架。
  • 目前有 2000 個安裝啟用數。
  • 上一次更新是 2024-04-09，距離現在已有 390 天。超過一年沒更新，安裝要確認版本是否可用。以及後續維護問題！
  • 外掛最低要求 WordPress 6.0 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 7.0 以上。
  • 有 42 人給過評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

vickyagravat |

外掛標籤

editor | gutenberg | Codemirror | syntax highlighter |

內容簡介

CodeMirror Blocks 可用於開發人員的博客、教學網站以顯示格式化（高亮顯示）任意程式代碼。
它支援 100 多種編程、腳本和標記語言，擁有 56 種不同的主題風格。

Code Block 是依賴於CodeMirror 函式庫的。

格式化程式碼區塊（語法突出顯示功能）會根據詞彙類別以不同顏色和字體顯示原始碼，這是提高文字可讀性和上下文之一的策略，尤其是對於跨越多個頁面的程式代碼，讀者可以依據需求忽略大量註解或程式碼。

此外採用此外掛不需要繁瑣的配置或駭客，只要安裝、啟用並開始使用區塊插入器就行了。

新功能包括

（新增）控制面板在程式碼區塊的頂部。
** 顯示語言/檔案名稱
** 顯示三個按鈕，包括執行、全螢幕、複製程式碼。
（新增）Web 編輯器（執行 HTML、CSS JavaScript 區塊）與 CodeMirror Block 1.1。
（更新）程式碼區塊現在是 CodeMirror Block 1.1。
（新增）選項頁面設置默認選項。
（新增）醒目的像（現在在 CodeMirror Block 1.1 中提供）。
（新增）CodeMirror Block 1.1 現在支援區塊對齊（寬寬、全寬），如果您的佈景主題支援的話。
（新增）經典編輯器支援（部分）。

功能特點

輕巧快速。
使用清晰的編碼標準使程式碼安全。
直觀的界面和許多設置。
跨瀏覽器兼容（在任何現代瀏覽器中都可以流暢工作）。
也可在 Android 行動瀏覽器上使用。
與所有預設的 WordPress 主題相容（已經測試過最新的 Twenty Twenty）。

主要特點包括

程式碼語法突出顯示。
行號（開/關）選項。
56 種主題風格（所有提供的 CodeMirror 主題）。
100 多種編程語言（大多數來自於 CodeMirror 提供的語言）。
編程語言選擇的選項。
只有在需要時加载 CodeMirror 文件。

支援的主題列表：

3024 日間
3024 夜間
Ambiance（行動版）
Ambiance
Base16 闇黑
Base16 光明
黑板
Cobalt
Colorforth
Eclipse
Elegant
Erlang 闇黑
較低的暗色
Liquibyte
MBO
MDN-like
午夜
Monokai
整潔
Neo
夜間
Paraiso 闇黑
Paraiso 光明
黑暗调色板
Rubyblue
Reactjs.org 風格
Solarized
Matrix（黑色）
Tomorrow night 晴朗
Tomorrow night eighties
TTCN
Twilight
Vibrant ink
XQ 闇黑
XQ 光明
Zenburn

鳴謝

此外掛使用 CodeMirror 函式庫來突出顯示 Code Blocks。 CodeMirror 是一個在 MIT 授權下共享的開放原始碼項目。

原文外掛簡介

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.
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 is an open-source project shared under the MIT license.

各版本下載點

  • 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
  • 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「CodeMirror Blocks」來進行安裝。

（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。

1.1.0 | 1.2.0 | 1.2.3 | 1.2.4 | 2.0.0 | 2.0.1 | 2.0.2 | 2.0.3 | trunk |

延伸相關外掛（你可能也想知道）

  • HTML Editor Syntax Highlighter 》使用 CodeMirror.js 在傳統文章和頁面 HTML 文字編輯器、Gutenberg 代碼編輯器和佈景主題及外掛編輯器中加入語法突顯。, 功能, , 在文章/頁面 HTML 編輯器中...。
  • Enlighter – Customizable Syntax Highlighter 》Enlighter 是一款免費且易於使用的 WordPress 語法高亮工具。其語法高亮效果是由 EnlighterJS javascript 函式庫所提供，能呈現出漂亮的程式碼外觀。, 您可以...。
  • Crayon Syntax Highlighter 》一款支援自訂語言和佈景主題的 PHP 和 jQuery 語法突顯外掛。, 它可以從 URL 或 WordPress 文章的文字中進行突顯。Crayon 讓管理語言檔案和使用正則表達式定...。
  • Urvanov Syntax Highlighter 》guage files, and there are many available on the plugin's website. The Urvanov Syntax Highlighter block is recommended for new posts instead of the...。
  • WP-Markdown 》這個外掛允許您使用 Markdown 語法來撰寫任何文章類型的文章。在儲存文章之前，外掛會將 Markdown 轉換為 HTML。編輯文章時，外掛會將其轉換回 Markdown 語法...。
  • Gist GitHub Shortcode 》這款外掛可以通過使用 shortcode 在您的文章中添加 Github Gists。, 範例：, 添加完整的 gist：, [gist id="3837669"], , 添加 gist 中的特定文件：, [gist i...。
  • APH Prism Syntax Highlighter 》Prism 是一個最受歡迎的語法高亮工具，被許多博客或網站廣泛使用，其中一些知名網站包括 Mozilla、Drupal 和 SitePoint。, 為什麼許多網站偏好使用這個高亮工...。
  • AH Code Highlighter 》使用起來非常簡單，並且非常輕量的代碼高亮化，具有 8 種不同的代碼高亮化主題。您可以將代碼與或不帶行號進行突出顯示。它是基於 Lea Verou 的 Prism.js。Pr...。
  • iG:Syntax Hiliter 》iG:Syntax Hiliter 可讓您在網站上發布原始碼，並提供語法突顯和格式化效果（如同程式碼編輯器和 IDE 所示）。您可以直接從您的程式碼編輯器或 IDE 貼上原始...。
  • WordPress Code Snippet 》這個外掛可以讓你在頁面或文章中加入程式碼片段，非常適合程式教學網站使用。, 升級說明, 如果你正在從 1.0 版升級，你會在程式碼庫頁面上看到一個升級選項。...。
  • SyntaxHighlighter Evolved: Go Brush 》此外掛程式啟用 Syntax Highlighter Evolved 的 Golang 語法。您可以使用 [go] 或 [golang] 在貼上程式碼時使用這種語法。, 請至 http://luisivan.net/2011/0...。
  • Prettify GC Syntax Highlighter 》此外掛直接複製了美化程式庫 prettify.js 從 google-code source browser。如此您的程式碼將會長得和在 google-code 上一模一樣。, CSS 被稍微修改了，以加粗...。
  • Better Code Editing 》此專案將 CodeMirror 功能添加到外掛和主題文件編輯器，以及自訂外觀自訂 CSS 方塊和自訂 HTML 小工具中。, 我們正在處理有關核心票證 #12423 的討論。, 如有...。
  • SyntaxHighlighter Evolved: VHDL Brush 》這款外掛可以透過擴展Syntax Highlighter Evolved的功能來啟用VHDL和Verilog語言的語法高亮顯示（因此，您需要安裝它）。, 您可以在Estado Finito網站上檢查V...。
  • Smart Syntax 》Smart Syntax 外掛可自動將 Google prettify 語法加入內容和評論中的 fenced code blocks 中，讓程式碼更容易閱讀。, 它特別針對 Jetpack 的 markdown 語法而...。

文章
Filter
Apply Filters
Close
Mastodon