レンダリングサンプル

以下のスクリーンショットはすべて、実際の WordPress サイト上で動作する Markdown Renderer for GitHub の実出力です（モックアップではありません）。書いた Markdown と、訪問者に表示される結果をセットで紹介します。

🔗 このページをデモサイトで見る

GitHub Flavored Markdown

テーブル

GFM のテーブル記法をそのまま書くと:

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

GitHub スタイルの罫線・配置・ゼブラストライプ付きでレンダリングされます:

シンタックスハイライト

コードフェンスは Shiki（VS Code と同じエンジン）でハイライトされ、コピーボタンが付きます:

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

Mermaid 図

フローチャート

```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
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 図をクリックするとパン＆ズーム対応のフルスクリーン表示が開きます。デモサイトでお試しください。

円グラフ（Mermaid）

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

インタラクティブチャート（Chart.js）

chart コードフェンスに JSON を書くだけで、レスポンシブでインタラクティブな 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"]
    }]
  }
}
```

試してみる

• 🔗 ライブデモ投稿を開く — 上のスクリーンショットの元ページ
• 📦 製品概要 — 機能・価格・インストール方法
• 🚀 プランと価格 — Pro 版の購入