[WordPress] 外掛分享： Markdown Renderer for GitHub

WordPress 外掛 Markdown Renderer for GitHub 的封面圖片。

前言介紹

  • 這款 WordPress 外掛「Markdown Renderer for GitHub」是 2025-08-27 上架。
  • 目前尚無安裝啟用數，是個很新的外掛。如有要安裝使用，建議多測試確保功能沒問題！
  • 上一次更新是 2026-02-02，距離現在已有 23 天。
  • 外掛最低要求 WordPress 6.5 以上版本才可以安裝。
  • 外掛要求網站主機運作至少需要 PHP 版本 8.1 以上。
  • 尚未有人給過這款外掛評分。
  • 還沒有人在論壇上發問，可能目前使用數不多，還沒有什麼大問題。

外掛協作開發者

noricku |

外掛標籤

gfm | Github | mermaid | markdown | syntax highlighting |

內容簡介

**摘要:**
Markdown Renderer for GitHub 可將您的 WordPress 內容轉換成美麗的 GitHub Flavored Markdown（GFM）呈現方式。非常適合技術部落格、文件網站以及任何需要專業代碼展示的內容。

**問題與答案:**
1. 這個外掛的特色有哪些？
- 🎨 美麗的語法突顯
- 使用由 VS Code 使用的相同語法突顯器Shiki
- 支援100多種程式設計語言
- 多款美麗主題（GitHub Light/Dark、VS Code主題等）
- 自動語言偵測
- 📊 Mermaid 圖表支援
- 創建流程圖、順序圖等
- 專業的圖表呈現
- 互動縮放功能
- 具備使用者友好的錯誤處理訊息
- ✨ GitHub Flavored Markdown
- 表格、任務列表、刪除線
- 自動 URL 連結
- 註腳支援
- 與 GitHub markdown 100% 兼容
- 📋 複製按鈕功能
- 一鍵複製程式碼
- GitHub風格的使用者體驗
- 完整的無障礙支援
- 適用於行動裝置的設計
- ⚡ 性能優化
- 資源延遲加載
- 最小的性能影響
- 適用於 CDN 的架構
- 針對 WordPress 進行優化
- 🌍 開發者友好
- 乾淨、語意化的 HTML 輸出
- 大量的鉤子和過濾器
- 支援翻譯（i18n）
- 遵循 WordPress 編碼標準
2. 這個外掛適合哪些用途？
- 技術部落格和教程
- 文件網站
- 代碼作品集
- 教育內容
- API 文件
- 開發者資源
3. 有關的技術需求是什麼？
- WordPress 6.0 或更高版本
- PHP 8.1 或更高版本
- 啟用 JavaScript 的現代瀏覽器
- 推薦：128MB + PHP 記憶體限制
4. 如何獲得支援？
- 請前往 WordPress.org 的支援論壇尋求支援
- 在發布支援請求之前：
- 查看上述常見問題的FAQ部分
- 確保您使用的是外掛的最新版本
- 在支援請求中包含您的 WordPress 和 PHP 版本
5. 是否可以提出功能請求？
- 歡迎提出功能建議！請在支援論壇上發表詳細描述您使用需求的內容。

原文外掛簡介

Markdown Renderer for GitHub transforms your WordPress content with beautiful GitHub Flavored Markdown (GFM) rendering. Perfect for technical blogs, documentation sites, and any content that needs professional code presentation.
Key Features:
🎨 Beautiful Syntax Highlighting
* Powered by Shiki – the same syntax highlighter used by VS Code
* Support for 100+ programming languages
* Multiple beautiful themes (GitHub Light/Dark, VS Code themes, and more)
* Automatic language detection
📊 Mermaid Diagram Support
* Create flowcharts, sequence diagrams, and more
* Professional diagram rendering
* Interactive zoom functionality
* Error handling with user-friendly messages
📈 Chart.js Chart Support
* Create line, bar, pie, doughnut, and more chart types
* 8 chart types including scatter, bubble, radar, and Polar Area
* Simple JSON configuration in “`chart fenced code blocks
* Responsive and interactive charts
✨ GitHub Flavored Markdown
* Tables, task lists, strikethrough
* Automatic URL linking
* Footnotes support
* 100% compatible with GitHub markdown
📋 Copy Button Feature
* One-click code copying
* GitHub-style user experience
* Full accessibility support
* Mobile-friendly design
⚡ Performance Optimized
* Asset lazy loading
* Minimal performance impact
* CDN-friendly architecture
* Optimized for WordPress
🌍 Developer Friendly
* Clean, semantic HTML output
* Extensive hooks and filters
* Translation ready (i18n)
* WordPress coding standards
Perfect for:
* Technical blogs and tutorials
* Documentation websites
* Code portfolios
* Educational content
* API documentation
* Developer resources
Technical Requirements

WordPress 6.0 or higher
PHP 8.1 or higher
Modern browser with JavaScript enabled
Recommended: 128MB+ PHP memory limit

Support
For support, please visit the WordPress.org support forum for this plugin. Our team actively monitors and responds to support requests.
Before posting a support request:
* Check the FAQ section above for common questions
* Ensure you’re using the latest version of the plugin
* Include your WordPress and PHP versions in your support request
Feature Requests:
We welcome feature suggestions! Please post them in the support forum with detailed descriptions of your use case.
Source Code
This plugin uses build tools for development efficiency.
Compressed File Source Code:
* build/index.js: WordPress Block Editor integration code
* Source: blocks/markdown/src/ folder
* Build: npm run build
Source Code Access:
* GitHub Repository: https://github.com/wakalab/markdown-renderer-for-github
* License: GPL v2 or later
* Development Branch: main
Build Instructions:
1. Install Node.js 18+
2. Install dependencies with npm install
3. Build with npm run build
4. Run tests with npm run test
Developer Resources:
* Development Environment Setup: See CLAUDE.md and docs/DEVELOPMENT.md
* Contributing: See CONTRIBUTING.md
* Build Process Details: See BUILD.md
Third Party Services
This plugin operates entirely self-contained and does NOT use any external third-party services.
Complete Local Operation:
* All JavaScript libraries are bundled locally within the plugin
* Shiki syntax highlighter – served from your WordPress installation (no CDN)
* Mermaid diagram renderer – served from your WordPress installation (no CDN)
* Chart.js chart renderer – served from your WordPress installation (no CDN)
* No external API calls or network requests are made
Privacy & Security Benefits:
* No data is transmitted to external servers
* No tracking, analytics, or data collection
* No external dependencies that could compromise your site
* GDPR compliant by design
* Works offline and in closed networks
All functionality is fully self-contained within your WordPress installation with no external service dependencies.
Privacy
This plugin does not collect any personal data. All processing is done locally on your server.
Credits

Syntax highlighting: Shiki
Diagram rendering: Mermaid
Chart rendering: Chart.js
Markdown parsing: markdown-it

Developer Information
This section provides essential information for developers who want to extend or customize the plugin.
For complete API documentation, architecture diagrams, and customization examples, see:
Developer Documentation on GitHub
Available Hooks and Filters
Actions:

gfmr_metadata_saved – Fired when code block metadata is saved

Parameters: $post_id (int), $metadata (array)
Use case: Sync metadata with external services, logging

Filters:

gfmr_metadata_get_metadata – Filter retrieved metadata before use

Parameters: $metadata (array), $post_id (int)
Use case: Custom language detection, metadata modification

gfmr_schema_data – Filter Schema.org JSON-LD data before output

Parameters: $schema (array), $post (WP_Post)
Use case: Add custom schema properties, author profiles

PHP Constants

GFMR_PLUGIN_FILE – Plugin main file path
GFMR_SLUG – Plugin slug (‘markdown-renderer-for-github’)
GFMR_URI – Plugin URL
GFMR_PATH – Plugin directory path
GFMR_PLUGIN_PATH – Plugin directory name (relative)
GFMR_PLUGIN_BASENAME – Plugin basename
GFMR_ASSETS_PATH – Assets directory URL

JavaScript Global Objects

wpGfmConfig – Plugin configuration object
wpGfmRenderer – Core rendering API (processCodeBlocks, renderContent, initialize)
wpGfmHighlighter – Highlighter wrapper instance
wpGfmShikiHighlighter – Actual Shiki highlighter instance
wpGfmUnifiedHighlight(code, lang, options) – Unified highlight function
wpGfmSwitchTheme(newTheme) – Theme switching function (‘light’, ‘dark’, ‘system’)
wpGfmRenderDiagram(content, element, options) – Diagram rendering function

Settings Option
Option name: gfmr_theme_settings
Available keys:

theme – Theme setting (‘light’, ‘dark’, ‘system’)
schema_enabled – Enable Schema.org JSON-LD output (bool)
schema_auto_detect_type – Auto-detect article type (bool)
schema_include_author – Include author in schema (bool)
schema_include_publisher – Include publisher in schema (bool)

Plugin Development
This plugin follows WordPress coding standards and provides clean, semantic HTML output.
Detailed Documentation:
For complete documentation including full API reference with code examples, architecture diagrams (Mermaid), step-by-step customization guides, and CSS class reference, visit:
GitHub Developer Documentation

各版本下載點

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

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

1.0.0 | 1.1.0 | 1.1.1 | 1.1.2 | 1.3.0 | 1.3.2 | 1.3.6 | 1.3.8 | 1.3.9 | 1.4.0 | 1.6.0 | 1.7.0 | 1.7.2 | 1.7.3 | 1.7.4 | 1.7.5 | 1.7.7 | 1.7.8 | 1.7.9 | 1.8.0 | 1.9.0 | 1.9.1 | 2.0.1 | 2.0.2 | 2.0.3 | 2.2.0 | 2.3.0 | 2.4.1 | 2.5.0 | trunk | 1.10.0 | 1.10.2 | 1.11.0 | 1.11.1 | 1.13.0 | 1.14.0 | 1.14.1 | 1.7.10 | 1.7.11 | 1.7.12 | 1.7.13 | 1.7.14 |

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

  • SyntaxHighlighter Evolved 》現在支援 WordPress 5.0 中的新區塊編輯器！, SyntaxHighlighter Evolved 讓您可以輕鬆地在網站上張貼帶有語法加亮功能的程式碼，而不會失去格式或做任何手動...。
  • Enlighter – Customizable Syntax Highlighter 》Enlighter 是一款免費且易於使用的 WordPress 語法高亮工具。其語法高亮效果是由 EnlighterJS javascript 函式庫所提供，能呈現出漂亮的程式碼外觀。, 您可以...。
  • WP-Syntax 》WP-Syntax 提供乾淨的語法突顯，使用 GeSHi，支援多種流行的語言，包括有或沒有行號的語法突顯，可以在從瀏覽器中複製程式碼片段時保持格式。, 它通過運行早...。
  • Kindeditor For WordPress 》由於這個外掛的使用者大多是中文使用者，因此以下我會使用中文繼續敘述。, Kindeditor是一個簡單高效、易於使用的編輯器，具備自動代碼高亮功能。。
  • Simple Code Block 》這是一個簡單的區塊，可供新版 WordPress 編輯器 Gutenberg 使用，使用 Ace 編輯器插入並顯示程式碼。, 現在使用此簡單的代碼區塊及 Ace 編輯器，輕鬆地在您...。
  • Better WordPress Syntax Highlighter 》此外掛可讓您在文章中的程式碼中加入語法標註。它簡單、輕巧且非常容易使用，具有多種選項。此外掛可與編輯器一起使用，且不會破壞您的程式碼格式。此外掛使...。
  • ACE HTML Block 》此外掛註冊了一個使用 ACE 編輯器的原始 HTML 區塊，功能包括語法高亮顯示、行號、縮排和 HTML 驗證。, 您區塊中包含的任何 HTML 標記都將像核心「自訂 HTML...。
  • Xhtheme Code Block 》**總結:**, Xhtheme Code Block 是一個 WordPress 外掛，用於在您的網站上添加程式碼區塊，支援語法高亮，並能適應主題的明亮和暗黑模式切換。, , **問題與答...。
  • WP-Syntax Download Extension 》這個外掛可以為WP-Syntax添加下載功能，每個代碼段落都會有漂亮的標題，其中包含一個永久鏈接錨點和兩個操作按鈕："原始"和"下載"。, 使用方法很簡單，只需將...。
  • WordPress Rainbow Hilite 》「WordPress Rainbow Hilite」已不再維護。如果您有意接手此外掛，請在 [github issues](https://github.com/mcguffin/wp-rainbow-hilite/issues) 留言通知。...。
  • WP Colored Coding 》這個外掛將酷炫的 JavaScript 語法高亮器 Rainbow.js 引入您的 WordPress-Blog 中，使您能夠獨立管理程式碼片段而不受文本編輯器的影響。, 重要！- 這個外掛...。
  • Simple Gist Embed 》這個外掛讓你可以在你的文章或頁面中嵌入 Github 的 Gists，但與其他類似外掛不同之處在於，它允許你在不離開 WordPress 的情況下創建 Gists。, 就是這樣，你...。
  • scGeSHi 》這是一個簡單的程式碼高亮度外掛，使用者可以輕鬆將遠端的原始檔案進行高亮度處理。, 此外掛使用 GeSHi 引擎，支援大量的程式語言。, 此外掛使用類似於 Code ...。
  • Prism Syntax Highlighter (detached) 》將Prism Syntax Highlighting Library整合至 WordPress。, 這個外掛是被稱為「分離式」，因為程式碼範例不會和所有的其他文字和內容混在一起裝在所見即所得編...。
  • Prettify For WordPress 》Prettify 是一個 WordPress 的外掛程式，可以自動嵌入 Google Code Prettify 所需的 JavaScript。此外，它還包括預覽代碼的功能，並且可以通過安裝 WordPress...。

文章
Filter
Apply Filters
Close
Mastodon