前言介紹
- 這款 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 |
延伸相關外掛（你可能也想知道）
Spectra Gutenberg Blocks – Website Builder for the Block Editor 》a.com/tutorials/?utm_source=wp-repo&utm_medium=link&utm_campaign=readme" rel="nofollow ugc">Spectra tutorials, you can easily learn how to ...。
Breadcrumb NavXT 》Breadcrumb NavXT 是受歡迎的 WordPress 外掛 Breadcrumb Navigation XT 的後繼者，從頭開始編寫以比其前輩更好。此外掛可為您的 WordPress 網誌或網站生成定...。
WP Go Maps (formerly WP Google Maps) 》這是一款易於使用的 Google 地圖和 Open Layers 地圖外掛程式（包括地圖區塊）！, 使用提供的短代碼，快速輕鬆地向 WordPress 文章和/或頁面添加自定義 Googl...。
PDF Embedder 》這款外掛程式可以上傳 PDF 檔案，並將它們直接嵌入到您網站的文章和頁面中。添加圖像一樣簡單！您的 PDF 檔案會自動調整到其自然大小和形狀。您還可以指定寬...。
Otter Blocks – Gutenberg Blocks, Page Builder for Gutenberg Editor & FSE 》Otter 是一款 Gutenberg Blocks 頁面建構外掛，可為 WordPress Block Editor（又稱 Gutenberg）添加額外功能，讓您享受更好的頁面建構體驗，而無需使用傳統的...。
Layout Grid Block 》想要輕鬆設定自訂欄位寬度和位置的列排版嗎？也許您想要在文章中將內容對齊全局佈局網格。使用此佈局網格區塊，您可以實現以上兩個目標，或是其中一個。此外...。
Email Address Encoder 》這是一個輕量級的外掛，可以保護純文字的電子郵件地址和 mailto 鏈結免受電子郵件抓取機器人獵取，透過將它們編碼成十進位和十六進位實體。對文章、頁面、留...。
Crowdsignal Forms 》The Crowdsignal Forms 外掛可以讓您直接在區塊編輯器中建立和管理投票。, 建立投票與編寫項目清單一樣簡單快速，不再需要嵌入區塊或複製、貼上。, 自訂投票...。
Blocks Animation: CSS Animations for Gutenberg Blocks 》Blocks Animation 可以讓您以優雅的方式，為所有的 Gutenberg 區塊添加 CSS 動畫。, Blocks Animation 的用戶介面非常原生且直觀，您甚至不會注意到它已經被...。
Superb Addons: Blocks, Patterns & Theme Designer for the Block Editor & FSE 》使用 Superb Gutenberg Blocks，只需幾秒鐘即可將全新的優秀功能添加到 WordPress 編輯器中！, Superb Gutenberg Blocks符合GDPR，且輕量且響應式。, 外掛是...。
Genesis Blocks 》Genesis Blocks 是一個能夠在 Gutenberg 段落編輯器中使用的頁面組件集。透過使用段落編輯器和 Genesis Blocks，您可以更加靈活地建立各種網站，並快速推出！...。
Flexible Table Block 》合併和分割儲存格, 您可以從多個選定的儲存格中合併或分割儲存格。, 靈活的樣式設置, 您可以針對表格、儲存格和標題標籤分別設置各種樣式。, 高級使用介面, ...。
Category Posts Widget 》Category Posts Widget是一個輕巧的小工具，設計用於一件事並且做得很好：顯示特定類別中最新的文章。, 基於詞語和類別的文章小工具, 這個免費小工具的高級版...。
Snow Monkey Editor 》Snow Monkey 編輯器是一個可以擴展區塊編輯器的外掛。, GitHub：https://github.com/inc2734/snow-monkey-editor/, 格式化程式, 在工具列中點擊 Snow Monkey ...。
Snow Monkey Blocks 》Snow Monkey Blocks 是一個為 Gutenberg 所設計的內容區塊外掛程式。使用此外掛，您可以快速且輕鬆地建立和發佈登陸頁面或高度設計的頁面，而且您不需要撰寫...。