GFM & Mermaid Rendering Examples

Everything on this page is written in plain Markdown and rendered live by **Markdown Renderer for GitHub**. ## Tables | Feature | Free | Pro | |---------|:----:|:---:| | GitHub Flavored Markdown | ✅ | ✅ | | Syntax highlighting (30+ languages) | ✅ | ✅ | | Mermaid diagrams | ✅ | ✅ | | Interactive charts (Chart.js) | ✅ | ✅ | | Standalone mode (outside WordPress) | — | ✅ | ## Task Lists - [x] Install the plugin - [x] Write your post in Markdown - [x] Add a Mermaid diagram - [ ] Publish and enjoy ## Syntax Highlighting Code blocks get GitHub-style highlighting with a copy button: ```javascript // Asynchronous rendering pipeline async function renderMarkdown(source) { const blocks = parseGfm(source); const html = await Promise.all(blocks.map(toHtml)); return html.join('\n'); } ``` ```php <?php // WordPress integration in one line add_filter( 'the_content', [ GFM_Renderer::class, 'render' ] ); ``` ## Blockquotes & Inline Styles > **Tip:** You can combine `inline code`, **bold**, *italic*, ~~strikethrough~~, > and [links](https://wakalab.dev/) anywhere — exactly like on GitHub. ## Mermaid Flowchart ```mermaid flowchart LR A[Write Markdown] --> B{GFM Renderer} B -->|Code| C[Highlighted blocks] B -->|Diagrams| D[Mermaid SVG] B -->|Charts| E[Interactive charts] C --> F[Published post] D --> F E --> F ``` ## Mermaid Sequence Diagram ```mermaid sequenceDiagram participant V as Visitor participant W as WordPress participant R as GFM Renderer V->>W: Open a post W->>R: the_content filter R-->>W: Rendered HTML + SVG W-->>V: Beautiful page ``` ## Mermaid Pie Chart ```mermaid pie title Time saved per post "Writing content" : 70 "Formatting" : 10 "Styling code blocks" : 20 ``` ## Interactive Chart (Chart.js) ```chart { "type": "bar", "data": { "labels": ["Tables", "Code", "Diagrams", "Charts"], "datasets": [{ "label": "Markdown features used per post", "data": [4, 6, 2, 1], "backgroundColor": ["#4e79a7", "#f28e2b", "#59a14f", "#e15759"] }] } } ```

// Asynchronous rendering pipeline
async function renderMarkdown(source) {
  const blocks = parseGfm(source);
  const html = await Promise.all(blocks.map(toHtml));
  return html.join('\n');
}

<?php
// WordPress integration in one line
add_filter( 'the_content', [ GFM_Renderer::class, 'render' ] );

flowchart LR
    A[Write Markdown] --> B{GFM Renderer}
    B -->|Code| C[Highlighted blocks]
    B -->|Diagrams| D[Mermaid SVG]
    B -->|Charts| E[Interactive charts]
    C --> F[Published post]
    D --> F
    E --> F

sequenceDiagram
    participant V as Visitor
    participant W as WordPress
    participant R as GFM Renderer
    V->>W: Open a post
    W->>R: the_content filter
    R-->>W: Rendered HTML + SVG
    W-->>V: Beautiful page

pie title Time saved per post
    "Writing content" : 70
    "Formatting" : 10
    "Styling code blocks" : 20