前言介紹
- 這款 WordPress 外掛「Syntax-highlighting Code Block (with Server-side Rendering)」是 2019-07-29 上架。
- 目前有 1000 個安裝啟用數。
- 上一次更新是 2025-11-30，距離現在已有 87 天。
- 外掛最低要求 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 |
延伸相關外掛（你可能也想知道）
Code Syntax Block 》代碼語法區塊（Code Syntax Block）擴充了 WordPress 區塊編輯器，使用 Prism 語法高亮工具為核心代碼區塊添加了語法高亮支持。, Prism 語法高亮工具在前端執...。
Code Block Syntax Highlighter for Elementor 》「Code Block Syntax Highlighter for Elementor」是一個 Elementor 的小工具，可讓您在您的網站上增加具有 prism.js 語法高亮的程式碼區塊。, 目前支援 Pris...。
Better WordPress Syntax Highlighter 》此外掛可讓您在文章中的程式碼中加入語法標註。它簡單、輕巧且非常容易使用，具有多種選項。此外掛可與編輯器一起使用，且不會破壞您的程式碼格式。此外掛使...。
AH Code Highlighter 》使用起來非常簡單，並且非常輕量的代碼高亮化，具有 8 種不同的代碼高亮化主題。您可以將代碼與或不帶行號進行突出顯示。它是基於 Lea Verou 的 Prism.js。Pr...。
FV Code Highlighter 》如果您的部落格有很多程式碼，想要讓它更易讀，那麼這個外掛就是您的選擇！, 此外掛支援 PHP、(x)HTML、JavaScript、CSS 及 XML 的語法高亮。預設的高亮顏色...。
Easy Syntax Highlighter 》這是一個使用 Google code prettify 腳本的語法突顯外掛程式，具有快速和輕量的優點，支援最多 31 種預設不同的顏色主題。, , 即使程式碼包含嵌入式連結、行...。
Codeblocks Extended with PrismJS 》Codeblocks Extended with PrismJS 是為了個人需求而誕生的輕量化程式碼高亮外掛，具有特殊的功能。, 許多其他基於 PrismJS 的外掛在存儲庫中既過時，又缺乏...。
Youbou Code Block 》<html>, <head>, <meta charset="UTF-8">, </head>, <body>, <p><strong>摘要：</strong> Youbo...。
{eac}Doojigger Readme Extension for WordPress 》ault translation table, # Default translation table, authentication_required=Authentication Required, changelog=Changelog, configuration=Configurat...。
Code Snippets in Comments 》Code Snippets in Comments外掛可以擴展Comments功能，可不更改在資料庫中儲存的留言內容，而在該內容顯示程式碼的時候進行突顯。, 預設情況下，Code Snippet...。