Every screenshot below is the real output of Markdown Renderer for GitHub running on a live WordPress site (not a mockup). Each example pairs the Markdown you write with the result your visitors see.

🔗 View this page on the demo site

GitHub Flavored Markdown

Tables

Write a GFM table as-is:

| Feature | Free | Pro |
|---------|:----:|:---:|
| GitHub Flavored Markdown | ✅ | ✅ |
| Syntax highlighting (30+ languages) | ✅ | ✅ |
| Mermaid diagrams | ✅ | ✅ |
| Interactive charts (Chart.js) | ✅ | ✅ |
| Standalone mode (outside WordPress) | — | ✅ |

It renders with GitHub-style borders, alignment, and zebra striping:

A GFM table rendered by Markdown Renderer for GitHub

Syntax Highlighting

Code fences are highlighted with Shiki (the same engine as VS Code) and get 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');
}
```

A JavaScript code block with GitHub-style syntax highlighting and a copy button

Mermaid Diagrams

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
```

A Mermaid flowchart rendered as SVG

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
```

A Mermaid sequence diagram rendered as SVG

Lightbox feature
On the live page, clicking a Mermaid diagram opens a full-screen view with pan & zoom. Try it on the demo site.

Pie Chart (Mermaid)

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

A Mermaid pie chart rendered as SVG

Interactive Charts (Chart.js)

Just write JSON in a chart code fence and it renders as a responsive, interactive Chart.js chart:

```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"]
    }]
  }
}
```

An interactive bar chart rendered with Chart.js

Try It Yourself