アーキテクチャ概要 (Architecture Overview)

Markdown Renderer for GitHub の内部構造と動作原理について説明します。

システム概要

プラグインは主に、PHP によるサーバーサイド処理、JavaScript によるフロントエンドレンダリング、そして Gutenberg ブロックの 3 つのレイヤーで構成されています。

mermaid

graph TB
    subgraph WordPress["WordPress Core"]
        WP[WordPress]
        GB[Gutenberg Editor]
        FE[Frontend Display]
    end

    subgraph Backend["PHP Backend"]
        Renderer[GFMR_Renderer<br/>Main Controller]
        Settings[GFMR_Settings<br/>Configuration]
        Assets[GFMR_Asset_Manager<br/>Script/Style Loading]
        Meta[GFMR_Metadata_Handler<br/>Code Block Metadata]
        Cache[GFMR_Cache_Manager<br/>Transient Cache]
    end

    subgraph Frontend["JavaScript Frontend"]
        Main[gfmr-main.js<br/>Entry Point]
        Core[gfmr-core.js<br/>Core Engine]
        Highlight[gfmr-highlighter.js<br/>Syntax Highlighting]
        Diagrams[gfmr-diagrams.js<br/>Mermaid Diagrams]
    end

    subgraph External["External Libraries"]
        Shiki[Shiki<br/>Syntax Highlighter]
        Mermaid[Mermaid.js<br/>Diagram Renderer]
    end

    WP --> Renderer
    GB --> Assets
    FE --> Main

    Renderer --> Settings
    Renderer --> Assets
    Renderer --> Meta
    Assets --> Cache

    Main --> Core
    Core --> Highlight
    Core --> Diagrams

    Highlight --> Shiki
    Diagrams --> Mermaid

レンダリングプロセス

ページロード時、プラグインはコンテンツ内のコードブロックと Mermaid 図表を自動検出し、必要なアセット（Shiki や Mermaid ライブラリ）をオンデマンドで読み込みます。

1. PHP による事前処理

保存時にコードブロックのメタデータを事前計算し、post_meta に保存します。
ページ表示時にコンテンツを解析し、必要なアセットを特定します。

2. JavaScript による動的レンダリング

DOMContentLoaded 事件で、フロントエンドエンジンが起動します。
メタデータを元に、Shiki や Mermaid を使用してコードのハイライトや図表の描画を行います。

パフォーマンス最適化

遅延読み込み: 重いライブラリ（Shiki, Mermaid）は、ページ上にそれらが必要な要素がある場合にのみ読み込まれます。
キャッシュ: WordPress の Transient API を使用して、機能検出結果やレンダリング済みデータをキャッシュします。

アーキテクチャ概要 (Architecture Overview) ​

システム概要 ​

レンダリングプロセス ​

1. PHP による事前処理 ​