前言介紹
- 這款 WordPress 外掛「Syntax-highlighting Code Block (with Server-side Rendering)」是 2019-07-29 上架。
- 目前有 1000 個安裝啟用數。
- 上一次更新是 2025-04-10，距離現在已有 23 天。
- 外掛最低要求 WordPress 6.6 以上版本才可以安裝。
- 外掛要求網站主機運作至少需要 PHP 版本 7.4 以上。
- 有 26 人給過評分。
- 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。
外掛協作開發者
allejo | westonruter |
外掛標籤
code | block | code syntax | syntax highlight | code highlighting |
內容簡介
這個外掛擴展了 WordPress 核心的程式碼塊，以添加在伺服器上呈現的語法突顯。現有的網站上的程式碼塊會自動擴展，以包含語法突顯。使用伺服器端的語法突顯消除了前端需要引用任何 JavaScript（例如 Highlight.js 或 Prism.js），這確保沒有未突出顯示的程式碼閃爍問題（FOUC？）。減少前端的腳本可以提高前端性能，並且使語法突顯的程式碼在由官方 AMP 外掛（參見ampproject/amp-wp#972）或在瀏覽器中關閉 JavaScript 時正確顯示在 AMP 頁面中。
除了不在前端添加任何 JavaScript 外，用於樣式設計程式碼塊所需的樣式表只有在存在程式碼塊時才會添加到頁面中。當渲染代碼塊時，樣式表是在內部添加的，確保它們不會阻止較高的內容呈現。如果樣式表因任何原因無法加載，則該塊只會呈現而沒有樣式，但有一個關鍵例外：高亮顯示的行將標記在mark元素中，因此它們將會被突顯顯示，包括在 RSS 源和通過電子郵件同步的帖子中（只要客戶端支援mark元素）。
這個擴展的程式碼塊使用語言自動檢測來添加語法突顯，但你可以在塊的設置側邊欄中覆蓋語言（當前編輯器不支持在程式碼塊中突顯語法）。該外掛支持highlight.php支持的所有程式語言（作為highlight.js的一個端口）。代碼塊還擴展以支持指定上述高亮顯示的行。也有一個選框用於在前端顯示行號（數字不可選擇）。最後，由於主題中的程式碼塊是否應包含在內的不一致性，此外掛會添加樣式來強制使它們默認為不包裝，而當需要包裝時則可以選擇此選框。
有關進階使用，請參閱外掛的Wiki頁面。
此外掛在GitHub上進行開發。請參閱外掛的目前問題列表。請隨時提交任何其他問題或請求。欲提交拉取請求，歡迎你的參與。
致謝
這是Code Syntax Block的分支，由Marcus Kazmierczak（mkaz）開發。版權所有（c）2018 Marcus Kazmierczak。根據 GPL 2.0 或更高版本許可。
highlight.php的發布根據 BSD 3-Clause 許可，版權所有 ©2006-2013、Ivan Sagalaev（[email protected]）、highlight.js（原始作者）。版權所有 ©2013、Geert Bergman（[email protected]）、highlight.php。
原文外掛簡介
This plugin extends the Code block in WordPress core to add syntax highlighting which is rendered on the server. Pre-existing Code blocks on a site are automatically extended to include syntax highlighting. Doing server-side syntax highlighting eliminates the need to enqueue any JavaScript on the frontend (e.g. Highlight.js or Prism.js) and this ensures there is no flash of unhighlighted code (FOUC?). Reducing script on the frontend improves frontend performance, and it also allows for the syntax highlighted code to appear properly in AMP pages as rendered by the official AMP plugin (see also ampproject/amp-wp#972) or when JavaScript is turned off in the browser.
This extended Code block uses language auto-detection to add syntax highlighting, but you can override the language in the block’s settings sidebar. (There is currently no syntax highlighting of the Code block in the editor, but see #8.) The plugin supports all programming languages that highlight.php supports (being a port of highlight.js). The Code block also is extended to support specifying lines to highlight which get marked up with mark elements (including in RSS feeds). There is also a checkbox for whether to show line numbers on the frontend (with the numbers being non-selectable). Lastly, given inconsistencies across themes regarding whether lines in a Code block should be wrapped, this plugin adds styling to force them to no-wrap by default, with a checkbox to opt in to wrapping when desired.
For advanced usage, please see the plugin wiki.
This plugin is developed on GitHub. See list of current issues with the plugin. Please feel free to file any additional issues or requests that you may come across. Pull requests are welcome. See contributing information.
Credits
This is a fork of Code Syntax Block by Marcus Kazmierczak (mkaz), which is also available on WordPress.org. Copyright (c) 2018 Marcus Kazmierczak. Licensed under GPL 2.0 or later.
highlight.php is released under the BSD 3-Clause License. Copyright © 2006-2013, Ivan Sagalaev ([email protected]), highlight.js (original author). Copyright © 2013, Geert Bergman ([email protected]), highlight.php
各版本下載點
- 方法一：點下方版本號的連結下載 ZIP 檔案後，登入網站後台左側選單「外掛」的「安裝外掛」，然後選擇上方的「上傳外掛」，把下載回去的 ZIP 外掛打包檔案上傳上去安裝與啟用。
- 方法二：透過「安裝外掛」的畫面右方搜尋功能，搜尋外掛名稱「Syntax-highlighting Code Block (with Server-side Rendering)」來進行安裝。
（建議使用方法二，確保安裝的版本符合當前運作的 WordPress 環境。
1.0.0 | 1.0.1 | 1.0.2 | 1.0.3 | 1.1.0 | 1.1.1 | 1.1.2 | 1.1.3 | 1.1.4 | 1.2.0 | 1.2.1 | 1.2.2 | 1.2.3 | 1.3.0 | 1.3.1 | 1.4.0 | 1.5.0 | 1.5.1 | trunk |
延伸相關外掛（你可能也想知道）
WPCode – Insert Headers and Footers + Custom Code Snippets – WordPress Code Manager 》插入標頭和頁腳 + 完整的 WordPress 代碼片段外掛, WPCode (前稱为 WPBeginner 的 "插入標頭和頁腳"）是使用率超过 100 万个网站的 WordPress 代码片段外掛中...。
Code Snippets 》Code Snippets 是在您的網站上運行程式碼片段的簡單，清潔和簡單的方法。它消除了將自定義片段添加到您的佈景主題的 functions.php 檔案的需求。, 現在提供 C...。
Simple Custom CSS Plugin 》無需麻煩地將自訂 CSS 新增到 WordPress 網站中。, 這是一個易於使用的 WordPress 外掛，可以添加自訂 CSS 樣式以覆寫外掛和佈景主題的預設樣式。該外掛旨在...。
Shortcoder — Create Shortcodes for Anything 》Shortcoder 外掛可讓您建立 HTML、JavaScript、CSS 和其他代碼片段的自訂捷徑。現在，這些捷徑可以在文章/頁面中使用，並且該片段將取代其位置。, ✍ 輕鬆建立...。
Head & Footer Code 》Head & Footer Code 插件可以讓你在不是開發人員的情況下，添加自定義代碼片段（JavaScript、CSS 或 HTML）到網頁中。您可以將代碼放置在 （...。
Scripts n Styles 》這個外掛讓管理員用戶能夠將自訂的 CSS 和 JavaScript 直接添加到個別文章、頁面或任何註冊的自訂文章類型中，也可以將類別添加到 body 標籤和文章容器中。還...。
SyntaxHighlighter Evolved 》現在支援 WordPress 5.0 中的新區塊編輯器！, SyntaxHighlighter Evolved 讓您可以輕鬆地在網站上張貼帶有語法加亮功能的程式碼，而不會失去格式或做任何手動...。
Code Embed 》注意： WordPress 5.0 及以上版本的使用者請查看常見問題以了解如何在區塊編輯器中使用此外掛。, Code Embed 外掛允許您在文章中嵌入程式碼（JavaScript 和 H...。
PHP Everywhere 》注意：此外掛更新至 3.0.0 版本是一項重大變更，將移除 [php_everywhere] 短代碼和小工具。請透過外掛設定頁面中的升級嚮導，將原本的代碼轉換為 Gutenberg ...。
Highlighting Code Block 》「Highlighting Code Block」外掛可讓你以一個點擊的方式添加一個有語法突顯的程式碼區塊。, 它支援「區塊編輯器」和「傳統編輯器」。, （不過，我們建議在「...。
CSS & JavaScript Toolbox 》感謝您查看我們的程式碼片段外掛。我相信它將完全符合您的需求。, 適用於以下情況：, , 前端修改（無需修改主題文件）, 添加功能（無需修改functions.php）, ...。
Advance Custom HTML 》這是一款用來專業編寫 HTML 代碼的高級 HTML 編輯器，提供不同的樣式、縮排與更多功能。, Advance Custom HTML 是一款功能強大、彈性十足的區塊外掛，讓您可...。
Code Block Pro – Beautiful Syntax Highlighting 》展示你美麗的程式碼，不僅僅是顯示它！這個版塊外掛提供編輯程式碼塊的功能，直接運行你的程式碼，使用與受歡迎的 VS Code 編輯器相同的渲染引擎。此外掛提供...。
Code Syntax Block 》代碼語法區塊（Code Syntax Block）擴充了 WordPress 區塊編輯器，使用 Prism 語法高亮工具為核心代碼區塊添加了語法高亮支持。, Prism 語法高亮工具在前端執...。
Foxtool All-in-One: Contact chat button, Custom login, Media optimize images 》總結：Foxtool 是根據管理 WordPress 網站的真實需求而開發的產品。經過一段時間的發展，Foxtool 已成為網站管理員不可或缺的外掛程式。該外掛擁有許多值得注...。