Markdown Renderer for GitHub

Transform your WordPress content with beautiful GitHub Flavored Markdown rendering, syntax highlighting, interactive diagrams, and server-side rendering. [🖼️ Rendering examples](/markdown-renderer-for-github/examples) · <a href="https://markdown-renderer.wakalab.dev/" target="_blank" rel="noopener">🔗 View the live demo</a> ## Overview Markdown Renderer for GitHub is a powerful WordPress plugin that brings the familiar GitHub markdown experience to your WordPress site. It's perfect for technical blogs, documentation sites, and any content that needs professional code presentation. It keeps evolving — through v2.9.4 — with SSR support, Chart.js integration, PlantUML/Ditaa diagrams, multilingual support, and more. ## Key Features ### 🎨 Beautiful Syntax Highlighting - Powered by **Shiki** - the same syntax highlighter used in VS Code - Supports **100+ programming languages** - Multiple beautiful themes (GitHub Light/Dark, VS Code themes, and more) - Automatic language detection - **Web Worker async highlighting** - Non-blocking syntax highlighting for a smooth UX (v2.6.0) ### 📊 Diagram Support - **Mermaid**: Create flowcharts, sequence diagrams, and more - **Ditaa**: Diagram support via Ditaa ASCII art (v2.7.5) - Professional diagram rendering - Interactive zoom - **Lightbox view**: Click to open a pan & zoom enlarged view (v1.11.0) - User-friendly error messages ### ✨ GitHub Flavored Markdown - Tables, task lists, strikethrough - Automatic URL linking - Footnote support - 100% compatible with GitHub markdown ### 📋 Copy Button - Copy code with one click - GitHub-style user experience - Full accessibility support - Mobile-friendly design ### ⚡ Performance Optimization - Parallel rendering and lazy asset loading (v2.7.0) - Minimal performance impact - CDN-friendly architecture - Optimized for WordPress - **Web Worker async highlighting**: Rendering that never blocks the main thread (v2.6.0) - **Server-side rendering**: A parallel rendering pipeline for fast page loads (v1.10.0) - Improved SVG rendering reliability and cache optimization ### ⚙️ Tabbed Settings Screen - Organized settings categories (themes, general, structured data, multilingual, license) - Logical grouping for a better user experience - Easy navigation between settings options ### 📝 YAML Frontmatter Support - Dynamic display of document metadata (title, date, author, tags) - Flexible document management - A better user experience for technical content ### 📑 Automatic Table of Contents (TOC) - Automatically extracts a table of contents from the heading structure (H1–H6) - A scroll-following sticky sidebar UI - Tabbed navigation for TOC settings (v1.12.0) ### 🖥️ SSR (Server-Side Rendering) (v1.10.0) - Server-side rendering of code blocks and Mermaid diagrams - Displays correctly even with JavaScript disabled - Improves SEO and initial page load performance ### 💡 Mermaid Lightbox (v1.11.0) - Clicking a Mermaid diagram opens a full-screen lightbox - Smoothly zoom & pan complex diagrams - Keyboard and accessibility support ### 📈 Chart.js Integration (v2.1.0) - Render bar, pie, line, and scatter charts - Inline definition via code fences - Responsive and interactive chart rendering ### 🌿 PlantUML/Ditaa Diagram Support (v2.7.5) - Full UML diagram support via PlantUML syntax - ASCII-art diagram support via Ditaa (v2.7.5) - Sequence, class, use-case diagrams, and more - Server-side rendering support ### ⚙️ Web Worker Async Highlighting (v2.6.0) - Runs syntax highlighting in a background Web Worker - Never blocks the main thread — smooth scrolling even on heavy pages - Seamless fallback for unsupported environments ### 🌐 Multilingual Support (v2.7.0) - Path-based URL language routing (e.g. `/en/`, `/ja/`) - A global language switcher with an inline display option (v2.7.0) - Customizable language display order and flag-only labels (v2.7.1) - Full i18n for both the admin UI and rendered content ## Use Cases - **Technical blogs**: Share code snippets with professional syntax highlighting - **Documentation sites**: Build beautiful technical documentation - **Developer portfolios**: Showcase your code in style - **Educational content**: Teach programming with clear, readable code examples - **API documentation**: Document APIs with interactive examples ## Pricing ### Free Edition - Basic markdown rendering - A limited set of syntax highlighting themes - Standard support via WordPress.org ### Premium Edition - All syntax highlighting themes - Advanced customization options - PlantUML diagram support - Lifetime updates - Commercial-use license [Get a premium license →](/markdown-renderer-for-github/pricing) --- **Pro License — Coming soon** The core features are available in the free edition on WordPress.org. Pro license checkout is currently being prepared. - [📦 Download the free edition from WordPress.org](https://wordpress.org/plugins/markdown-renderer-for-github/) - <a href="https://markdown-renderer.wakalab.dev/" target="_blank" rel="noopener">🔗 View the live demo</a> ## Requirements - WordPress 6.0 or higher - PHP 8.1 or higher - A modern browser with JavaScript enabled ## Installation 1. Download the plugin from WordPress.org, or purchase the premium edition 2. Upload it to your WordPress plugins directory 3. Activate the plugin 4. Configure the settings in your WordPress admin [See the full documentation →](/markdown-renderer-for-github/documentation/markdown-renderer) [See the technical specifications →](/markdown-renderer-for-github/tech)