Title: Markdown Renderer for GitHub Author: wakalab Published: 28 Tháng 8, 2025 Last modified: 29 Tháng 6, 2026 --- Tìm kiếm plugin ![](https://ps.w.org/markdown-renderer-for-github/assets/banner-772x250.png?rev= 3431939) ![](https://ps.w.org/markdown-renderer-for-github/assets/icon.svg?rev=3566758) # Markdown Renderer for GitHub Bởi [wakalab](https://profiles.wordpress.org/noricku/) [Tải về](https://downloads.wordpress.org/plugin/markdown-renderer-for-github.2.10.3.zip) * [Chi tiết](https://vi.wordpress.org/plugins/markdown-renderer-for-github/#description) * [Đánh giá](https://vi.wordpress.org/plugins/markdown-renderer-for-github/#reviews) * [Cài đặt](https://vi.wordpress.org/plugins/markdown-renderer-for-github/#installation) * [Nhà phát triển](https://vi.wordpress.org/plugins/markdown-renderer-for-github/#developers) [Hỗ trợ](https://wordpress.org/support/plugin/markdown-renderer-for-github/) ## Mô tả Markdown Renderer for GitHub brings GitHub Flavored Markdown (GFM) rendering to WordPress for technical blogs, documentation sites, tutorials, code portfolios, and developer resources. Add Markdown in the block editor or with the `[gfmr_markdown]` shortcode, then render code, tables, task lists, diagrams, and charts on the front end. The free plugin includes: * GitHub Flavored Markdown rendering with tables, task lists, strikethrough, autolinks, and footnotes * Native grammars for 30+ programming languages, plus fallback handling for many more * GitHub Light, GitHub Dark, and system-aware code themes * Mermaid diagrams with interactive controls * 8 chart types through Chart.js charts from `chart` fenced code blocks * Optional PlantUML rendering through a configured external PlantUML/Kroki server * Table of Contents, structured data, multilingual URL options, and server-side rendering controls * A built-in admin manual with Getting Started, Usage, FAQ, Troubleshooting, Support, and System Info tabs * WordPress Abilities API support on WordPress 6.9+ for AI agents such as Claude Code and Codex A separate Pro add-on may provide advanced workflow features such as enhanced code- block options, custom themes, higher-level AI orchestration, and priority support. Core Markdown, syntax highlighting, Mermaid, Chart.js, PlantUML, and the basic settings are included in the free plugin. Detailed user guidance is available inside the plugin settings screen after activation. This keeps the manual, FAQ, troubleshooting, support guidance, and non-secret system information close to the WordPress admin workflow without requiring a separate documentation website. ### Technical Requirements * WordPress 6.8 or higher * PHP 8.2 or higher * Modern browser with JavaScript enabled * Recommended: 128MB+ PHP memory limit * Recommended: gzip or Brotli compression enabled for static JavaScript on your web server **Why server compression matters:** The syntax-highlighting and diagram libraries are large when uncompressed (Shiki ~2.35 MB, Mermaid ~3.2 MB) but shrink dramatically when delivered with gzip or Brotli (Shiki ~302 KB, Mermaid ~908 KB). For the best front-end performance, ensure your web server compresses static JavaScript (for example mod_deflate/mod_brotli on Apache, or the gzip/brotli directives on nginx). Most managed hosts and CDNs enable this by default. The plugin adds a **Tools → Site Health** check that reports whether these bundles are actually being served compressed. ### 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 * **assets/libs/ shiki/shiki.min.js**: Shiki syntax highlighter (self-contained bundle, no CDN) * Source: scripts/vendor/shiki-entry.mjs * Build: npm run vendor:shiki **Source Code Access:** * **GitHub Repository**: https://github.com/my-biz-dev/ markdown-renderer-for-github * **License**: GPL v2 or later * **Development Branch**: main **Build Instructions:** 1. Install Node.js 22 LTS (see .nvmrc) 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 By default this plugin runs entirely on your own server. The core rendering libraries are bundled locally and make no external requests: * 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) * markdown-it parser – bundled locally **Optional features that contact an external server (opt-in, off by default):** Two features can send diagram source to an external rendering server. Both are inactive until you explicitly enable, configure a server URL, and accept the in-plugin privacy notice: * **PlantUML diagrams** – PlantUML has no in-browser renderer, so the source of each “`plantuml block is sent to a PlantUML/Kroki server to produce the image. - Default server (configurable, or self-hostable): https://www.plantuml.com/ plantuml - Service: PlantUML – https://plantuml.com/ * **Server-side Mermaid rendering (Kroki)** – an optional mode that pre-renders Mermaid diagrams on a Kroki server for faster first paint. When enabled, the Mermaid source is sent to the configured server. - Default server (configurable, or self-hostable): https://kroki.io - Service: Kroki – https://kroki.io/ To keep diagram source private you can point either feature at a server you self- host. When both options are left in their default (disabled) state, no diagram data or any other content leaves your site. **Privacy & Security Benefits (default configuration):** * No tracking, analytics, or data collection * No data is transmitted to external servers unless you opt in to PlantUML or server-side Mermaid rendering * Works offline and in closed networks with the default settings ### Privacy This plugin does not collect any personal data, and with the default settings all processing happens locally on your server. If you opt in to PlantUML or server-side( Kroki) Mermaid rendering, the source text of those diagrams is sent to the rendering server you configure – choose a server you trust, or self-host one, for sensitive content. ### Credits * Syntax highlighting: [Shiki](https://shiki.style/) * Diagram rendering: [Mermaid](https://mermaid.js.org/) * Chart rendering: [Chart.js](https://www.chartjs.org/) * Markdown parsing: [markdown-it](https://markdown-it.github.io/) ### 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](https://github.com/my-biz-dev/markdown-renderer-for-github/tree/main/docs) #### 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](https://github.com/my-biz-dev/markdown-renderer-for-github/tree/main/docs) ## Ảnh màn hình [⌊Initial Setup - Getting Started guidance inside the plugin settings screen after activation⌉⌊Initial Setup - Getting Started guidance inside the plugin settings screen after activation⌉[ **Initial Setup** – Getting Started guidance inside the plugin settings screen after activation [⌊Main Settings - Code Block settings for theme selection, Markdown style presets, and live preview⌉⌊Main Settings - Code Block settings for theme selection, Markdown style presets, and live preview⌉[ **Main Settings** – Code Block settings for theme selection, Markdown style presets, and live preview [⌊Frontend Output - Rendered Markdown with syntax highlighting, tables, diagrams, and charts⌉⌊Frontend Output - Rendered Markdown with syntax highlighting, tables, diagrams, and charts⌉[ **Frontend Output** – Rendered Markdown with syntax highlighting, tables, diagrams, and charts [⌊FAQ and Troubleshooting - Built-in admin manual sections for common questions and diagnostics⌉⌊FAQ and Troubleshooting - Built-in admin manual sections for common questions and diagnostics⌉[ **FAQ and Troubleshooting** – Built-in admin manual sections for common questions and diagnostics [⌊Support and System Info - Support guidance and non-secret environment information for support requests⌉⌊Support and System Info - Support guidance and non-secret environment information for support requests⌉[ **Support and System Info** – Support guidance and non-secret environment information for support requests [⌊Advanced Settings - Optional settings for Table of Contents, structured data, diagrams, multilingual URLs, and server-side rendering⌉⌊Advanced Settings - Optional settings for Table of Contents, structured data, diagrams, multilingual URLs, and server-side rendering⌉[ **Advanced Settings** – Optional settings for Table of Contents, structured data, diagrams, multilingual URLs, and server-side rendering ## Khối Plugin này cung cấp 1 khối. * Markdown Write in GitHub Flavored Markdown with real-time preview. ## Cài đặt **Install from WordPress admin:** 1. Go to Plugins > Add New. 2. Search for “Markdown Renderer for GitHub”. 3. Click Install Now. 4. Click Activate. **Install from a ZIP file:** 1. Go to Plugins > Add New > Upload Plugin. 2. Upload the plugin ZIP file. 3. Click Install Now. 4. Click Activate. **First setup after activation:** 1. Open Markdown Renderer for GitHub > Manual in the WordPress admin menu. 2. Read the Getting Started tab. 3. Add a Markdown block to a post or page, or wrap Markdown in the `[gfmr_markdown]` shortcode. 4. Preview the front-end page. 5. Adjust the Code Block theme, Markdown style preset, Table of Contents, diagram, structured data, multilingual, or server-side rendering settings only when your site needs them. ## Hỏi đáp ### What should I do first after installation? Open Markdown Renderer for GitHub > Manual, read the Getting Started tab, then create or edit a post with the Markdown block. Preview the front-end page and adjust the Code Block settings if needed. ### How do I add Markdown content? Use the Markdown block in the block editor. In the Classic editor, widgets, or templates, wrap Markdown in the `[gfmr_markdown]` enclosing shortcode. The shortcode renders through the same core pipeline as the block. ### What should I check if settings are not reflected? Save the settings, clear page cache, CDN cache, browser cache, and any asset optimization cache. Then check a front-end post that actually contains a Markdown block or `[ gfmr_markdown]` shortcode. ### Can I use this with my theme or cache plugin? Usually yes. If output looks stale or broken, temporarily disable cache, minification, defer, and combine settings. If styles still look wrong, test briefly with a default WordPress theme to isolate theme CSS conflicts. ### Does this plugin send content to external services? By default, no. Shiki, Mermaid, Chart.js, and markdown-it are bundled locally and served from your WordPress installation. Optional PlantUML and server-side Mermaid rendering can send diagram source to an external renderer only after you enable and configure those features. See Third Party Services for details. ### What is the difference between the free and Pro versions? The free plugin includes the main rendering features: GFM, Shiki, Mermaid, Chart. js, PlantUML, Table of Contents, structured data, multilingual options, and basic AI agent abilities. Pro is a separate add-on for advanced workflow features and priority support. You do not need Pro for the core rendering features. ### Where can I get support? Free plugin usage questions and reproducible bugs should go to the WordPress.org support forum. Pro license, billing, contract, refund, and account questions should not be posted in the WordPress.org forum; use the support guidance shown inside the plugin admin screen. ### What information should I include in a support request? Include WordPress version, PHP version, plugin version, theme, affected feature, steps to reproduce, and relevant non-secret System Info from the plugin settings screen. Never share license keys, API keys, Application Passwords, tokens, cookies, or private account information. ## Đánh giá Không có đánh giá nào cho plugin này. ## Người đóng góp & Lập trình viên “Markdown Renderer for GitHub” là mã nguồn mở. Những người sau đã đóng góp vào plugin này. Những người đóng góp * [ wakalab ](https://profiles.wordpress.org/noricku/) [Dịch “Markdown Renderer for GitHub” sang ngôn ngữ của bạn.](https://translate.wordpress.org/projects/wp-plugins/markdown-renderer-for-github) ### Muốn tham gia phát triển? [Duyệt code](https://plugins.trac.wordpress.org/browser/markdown-renderer-for-github/), check out [SVN repository](https://plugins.svn.wordpress.org/markdown-renderer-for-github/), hoặc theo dõi [nhật ký phát triển](https://plugins.trac.wordpress.org/log/markdown-renderer-for-github/) qua [RSS](https://plugins.trac.wordpress.org/log/markdown-renderer-for-github/?limit=100&mode=stop_on_copy&format=rss). ## Nhật ký thay đổi #### 2.10.3 * Add admin manual submenus * Count multiline translations without msgfmt * Satisfy PHP lint for admin pages #### 2.10.2 * Add live style-preset preview to settings page * Align light theme code background with GitHub #f6f8fa * render default-language body in multilingual blocks for untranslated visitor language #### 2.10.1 * Size Mermaid lightbox from SVG natural viewBox * Add idempotent demo-post seeder for local verification * hide Save Changes button on the Extensions settings tab * hide copy button label text via gfmr-copy-text class #### 2.10.0 * Prune stale non-standard asset subdirs in SVN deploy * exclude CJK-subject commits from changelog and guard commit subjects * add WordPress.org stats tracker * verify wp.org publish after deploy * add KaTeX latex rendering support * add markdown style presets * add advisory CI reports for knip and bundle size * add post-merge quality threshold alert * add local Plugin Check husky gate * add language switcher disable hook * Add init-stage timeout to Shiki worker manager * differential re-render on OS theme change * Scope MutationObserver code-block processing to inserted roots * Add WordPress Abilities API foundation for AI agents * reduce PR CI work * cache SSR allowed-html allow-list per request * short-circuit has_markdown_patterns backtick detection * batch SSR cache reads in code-block pass * Cache base SVG allowed-tags array per request * Add filterable worker line threshold * generate SVN tag as clean svn copy after trunk commit * resolve knip quality threshold breach * Repair task list checkbox attr spacing before kses (Issue #854) * align frontmatter date expectations with js-yaml v5 * Keep chart container light background on dark themes * Revert js-yaml to v4 and pin against v5 major bump * Keep frontmatter dates as strings via JSON_SCHEMA #### 2.9.4 * Maintenance release: internal CI nightly schedule adjustment only. No changes to plugin functionality. #### 2.9.3 * add [gfmr_markdown] shortcode for block-independent Markdown * promote security severity gate to blocking on critical (#837 F-B) * add Lemon Squeezy auto-updater for the standalone Pro plugin * skip Mermaid in SSR code-block highlighting (Issue #861) * nest content-only delegation to avoid dead-branch error * wire up toc_sticky and remove dead chart_zoom_enabled setting * gate PlantUML AJAX proxy behind is_plantuml_enabled() * make get_the_tags callback accept a single argument #### 2.9.2 * add WordPress Playground Live Preview blueprint * improve readme discoverability and add settings review footer * Add per-language featured images for built-in multilingual mode * Add release smoke gate manifest and CI locale parity * Add Settings action link to plugin row * give deploy-svn.sh standalone defaults for slug/SVN vars * remove test-environment artifacts from wp.org screenshots * preserve GFM task list checkboxes through SSR/baked sanitization #### 2.9.1 * add multilingual taxonomy assignments * keep WordPress.org readme tabs fresh and fix version cache-busting * isolate readiness tests from config.sh env leak (README_FILE) #### 2.9.0 * add i18n .mo auto-recompile hooks and wporg/i18n audit agents * add WP-cross-version smoke and timing history median * add diff coverage and security severity gate quality gates * add interactive chart controls * add approximate grammar fallbacks for unbundled languages * add markdown image drop uploads * reveal frontend content on render pipeline failure * stabilise diagram-layout tests against font-metrics flake * use foreignObject bounds for diagram label alignment tests * optimize PR lint and dependency caches * exclude .security-allowlist.json from wp.org dist * reveal Mermaid SSR cache-warmed diagrams * wire roadmap status update into release * repair version-check tooling and sync composer.json version * unify nav waitForURL/waitForNavigation timeout to 60s * retry WP login in global-setup to absorb startup flakiness * clean up release lock via EXIT trap on early abort #### 2.8.1 * improve inline code contrast and stabilize tests * align diagram rendering layouts * repair mermaid state diagram styles * preserve mermaid flowchart polygon transforms * preserve mermaid flowchart path transforms * keep wide mermaid diagrams readable * fit wide mermaid diagrams to container * center chart preview images * update mermaid server privacy gate live #### 2.8.0 * live Mermaid bg color and concurrent chart rendering * Add cross-session diagram cache with localStorage persistence * Add SVN trunk cleanup script for stray readiness-results * scan clean dist in plugin-check instead of dev tree * Add shared concurrent-load guard for editor diagram libraries * add non-interactive mode and reduce log noise * Add bounded render cache helper and skip rendered Mermaid blocks * Show friendly notice for PlantUML suppressed diagrams * Add server-side Mermaid rendering via Kroki * add configurable PlantUML server URL * send a sync trigger to wakalab-site on release * Add per-language SEO meta description feature * Add interactive diagram toolbar with expand and collapse * add clipboard image paste with media upload * adaptive debounce + PlantUML completeness guard * skip redundant builds and vendor reinstalls * render baked Mermaid diagrams and code blocks in prerendered content * resolve stale roadmap-update.yml reference in integrated-release STEP 3.4 #### 2.7.17 * scope and time-box Plugin Check to prevent release hang * isolate E2E compose project to stop release/CI smoke collision #### 2.7.16 * harden release smoke against transient nav timeouts #### 2.7.15 * add WordPress.org submission readiness check suite * automate nightly plugin-check parallel diff (Phase 6-A) * Reserve placeholder space to reduce CLS/FOUC * load frontend styles non-render-blocking with critical CSS * Exclude heavy diagram pages from prerender (WP7.0 spike) * load Shiki grammars on demand per page languages * add Site Health check for diagram bundle compression * add Service Worker for long-term vendor caching * extend diagram cache TTL to 30 days with version-keyed invalidation * bake Chart.js into cached WebP/PNG images on render * bake editor-rendered diagrams to skip frontend JS * skip Mermaid renderer when diagrams are fully baked * bake SVGs into eviction-proof post meta * Offload Shiki highlighting to Web Worker * Memoize editor Mermaid/Chart renders with source-keyed cache * defer frontend scripts and schedule non-blocking init * Lazy-load Shiki and Mermaid bundles on demand * Chunk initial block rendering to reduce INP * run setup-php release jobs on ubuntu-latest (fix native runner sudo loop) * make wporg readiness tests resilient to missing jq/msgfmt * check license.txt with correct lowercase name * avoid set -e abort on (( count++ )) in cleanup_old_reports * replace bash 4 mapfile in cache-cleanup PR job * allow anonymous Mermaid SVG cache warming * add bounded schema-aware cache keys * make plugin check gate executable * restrict baked data: URIs to base64 raster images * harden baked data: URI handling against entity-encoded bypass * Route worker init failure to main-thread highlighter * Prevent readiness script abort from grep|head SIGPIPE under pipefail * Treat undeterminable readiness values as warn, not false fail ## Meta * Phiên bản **2.10.3** * Cập nhật lần cuối **1 giờ trước** * Số lượt cài đặt **10+** * Phiên bản WordPress ** 6.8 hoặc cao hơn ** * Đã kiểm tra lên đến **7.0** * Phiên bản PHP ** 8.2 hoặc cao hơn ** * Ngôn ngữ * [English (US)](https://wordpress.org/plugins/markdown-renderer-for-github/) * Thẻ * [chart](https://vi.wordpress.org/plugins/tags/chart/)[Github](https://vi.wordpress.org/plugins/tags/github/) [markdown](https://vi.wordpress.org/plugins/tags/markdown/)[mermaid](https://vi.wordpress.org/plugins/tags/mermaid/) [syntax highlighting](https://vi.wordpress.org/plugins/tags/syntax-highlighting/) * [Nâng cao](https://vi.wordpress.org/plugins/markdown-renderer-for-github/advanced/) ## Đánh giá Chưa có đánh giá nào được gửi. [Your review](https://wordpress.org/support/plugin/markdown-renderer-for-github/reviews/#new-post) [Xem tất cả đánh giá](https://wordpress.org/support/plugin/markdown-renderer-for-github/reviews/) ## Những người đóng góp * [ wakalab ](https://profiles.wordpress.org/noricku/) ## Hỗ trợ Có điều gì muốn nói? cần giúp đỡ? [Xem diễn đàn hỗ trợ](https://wordpress.org/support/plugin/markdown-renderer-for-github/)