Render GitHub Flavored Markdown in WordPress: Shiki code highlighting, Mermaid diagrams, and Chart.js charts. For documentation and dev blogs.

wakalab

Markdown Renderer for GitHub brings GitHub-quality content rendering to WordPress. Paste GitHub Flavored Markdown (GFM) – code blocks, tables, task lists, and diagrams – and it renders just like it does on GitHub.com, with no manual HTML and no copy-paste screenshots. Built for technical bloggers, documentation teams, educators, and anyone publishing code-heavy content.
Write blog posts and documentation in Markdown with automatic code highlighting for every fenced code block – READMEs, tutorials, and changelogs render beautifully as-is.
Key Features:
🎨 Beautiful Syntax Highlighting 
* Powered by Shiki – the same syntax highlighter used by VS Code 
* Native grammars for 30+ programming languages, with alias and approximate-grammar fallbacks for many more 
* Two carefully tuned themes – GitHub Light and GitHub Dark – with automatic light/dark switching 
* Automatic language detection
📊 Mermaid Diagram Support 
* 9 diagram types: flowcharts, sequence, class, state, Gantt, user journey, Git graph, ER, and pie charts 
* 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
🌱 PlantUML Diagram Support (optional, opt-in) 
* UML and more from “`plantuml fenced code blocks 
* PlantUML has no in-browser renderer, so diagrams are produced by an external PlantUML/Kroki server 
* Ships ready to configure, but no content is sent off-site until you set a server URL and accept the privacy notice in the settings (see the Third Party Services section)
✨ 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 – libraries load only on pages that use them 
* Minimal performance impact 
* Self-contained – no external CDN required 
* 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
<h3>Technical Requirements</h3>
<ul>
<li>WordPress 6.8 or higher</li>
<li>PHP 8.2 or higher</li>
<li>Modern browser with JavaScript enabled</li>
<li>Recommended: 128MB+ PHP memory limit</li>
<li>Recommended: gzip or Brotli compression enabled for static JavaScript on your web server</li>
</ul>
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.
<h3>Support</h3>
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.
<h3>Source Code</h3>
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 <code>npm install</code> 
3. Build with <code>npm run build</code> 
4. Run tests with <code>npm run test</code>
Developer Resources: 
* Development Environment Setup: See CLAUDE.md and docs/DEVELOPMENT.md 
* Contributing: See CONTRIBUTING.md 
* Build Process Details: See BUILD.md
<h3>Third Party Services</h3>
By default this plugin runs entirely on your own server. The core rendering libraries are bundled locally and make no external requests:
<ul>
<li>Shiki syntax highlighter – served from your WordPress installation (no CDN)</li>
<li>Mermaid diagram renderer – served from your WordPress installation (no CDN)</li>
<li>Chart.js chart renderer – served from your WordPress installation (no CDN)</li>
<li>markdown-it parser – bundled locally</li>
</ul>
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:
<ul>
<li>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.
<ul>
<li>Default server (configurable, or self-hostable): https://www.plantuml.com/plantuml</li>
<li>Service: PlantUML – https://plantuml.com/</li>
</ul>
</li>
<li>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.
<ul>
<li>Default server (configurable, or self-hostable): https://kroki.io</li>
<li>Service: Kroki – https://kroki.io/</li>
</ul>
</li>
</ul>
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
<h3>Privacy</h3>
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.
<h3>Credits</h3>
<ul>
<li>Syntax highlighting: <a href="https://shiki.style/" rel="nofollow ugc">Shiki</a></li>
<li>Diagram rendering: <a href="https://mermaid.js.org/" rel="nofollow ugc">Mermaid</a></li>
<li>Chart rendering: <a href="https://www.chartjs.org/" rel="nofollow ugc">Chart.js</a></li>
<li>Markdown parsing: <a href="https://markdown-it.github.io/" rel="nofollow ugc">markdown-it</a></li>
</ul>
<h3>Developer Information</h3>
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: 
<a href="https://github.com/my-biz-dev/markdown-renderer-for-github/tree/main/docs" rel="nofollow ugc">Developer Documentation on GitHub</a>
<h4>Available Hooks and Filters</h4>
Actions:
<ul>
<li><code>gfmr_metadata_saved</code> – Fired when code block metadata is saved
<ul>
<li>Parameters: <code>$post_id</code> (int), <code>$metadata</code> (array)</li>
<li>Use case: Sync metadata with external services, logging</li>
</ul>
</li>
</ul>
Filters:
<ul>
<li>
<code>gfmr_metadata_get_metadata</code> – Filter retrieved metadata before use
<ul>
<li>Parameters: <code>$metadata</code> (array), <code>$post_id</code> (int)</li>
<li>Use case: Custom language detection, metadata modification</li>
</ul>
</li>
<li>
<code>gfmr_schema_data</code> – Filter Schema.org JSON-LD data before output
<ul>
<li>Parameters: <code>$schema</code> (array), <code>$post</code> (WP_Post)</li>
<li>Use case: Add custom schema properties, author profiles</li>
</ul>
</li>
</ul>
<h4>PHP Constants</h4>
<ul>
<li><code>GFMR_PLUGIN_FILE</code> – Plugin main file path</li>
<li><code>GFMR_SLUG</code> – Plugin slug (‘markdown-renderer-for-github’)</li>
<li><code>GFMR_URI</code> – Plugin URL</li>
<li><code>GFMR_PATH</code> – Plugin directory path</li>
<li><code>GFMR_PLUGIN_PATH</code> – Plugin directory name (relative)</li>
<li><code>GFMR_PLUGIN_BASENAME</code> – Plugin basename</li>
<li><code>GFMR_ASSETS_PATH</code> – Assets directory URL</li>
</ul>
<h4>JavaScript Global Objects</h4>
<ul>
<li><code>wpGfmConfig</code> – Plugin configuration object</li>
<li><code>wpGfmRenderer</code> – Core rendering API (processCodeBlocks, renderContent, initialize)</li>
<li><code>wpGfmHighlighter</code> – Highlighter wrapper instance</li>
<li><code>wpGfmShikiHighlighter</code> – Actual Shiki highlighter instance</li>
<li><code>wpGfmUnifiedHighlight(code, lang, options)</code> – Unified highlight function</li>
<li><code>wpGfmSwitchTheme(newTheme)</code> – Theme switching function (‘light’, ‘dark’, ‘system’)</li>
<li><code>wpGfmRenderDiagram(content, element, options)</code> – Diagram rendering function</li>
</ul>
<h4>Settings Option</h4>
Option name: <code>gfmr_theme_settings</code>
Available keys:
<ul>
<li><code>theme</code> – Theme setting (‘light’, ‘dark’, ‘system’)</li>
<li><code>schema_enabled</code> – Enable Schema.org JSON-LD output (bool)</li>
<li><code>schema_auto_detect_type</code> – Auto-detect article type (bool)</li>
<li><code>schema_include_author</code> – Include author in schema (bool)</li>
<li><code>schema_include_publisher</code> – Include publisher in schema (bool)</li>
</ul>
<h4>Plugin Development</h4>
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:
<a href="https://github.com/my-biz-dev/markdown-renderer-for-github/tree/main/docs" rel="nofollow ugc">GitHub Developer Documentation</a>

Alternatives to Markdown Renderer for GitHub

Top alternatives