Architecture Overview

Comprehensive overview of the Markdown Renderer for GitHub plugin architecture and processing flows.

System Overview

The plugin consists of three main layers: PHP backend, JavaScript frontend, and Gutenberg block integration.

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

Rendering Process

On page load, the plugin automatically detects code blocks and Mermaid diagrams in the content and loads the required assets (Shiki or Mermaid libraries) on demand.

1. PHP Pre-processing

• Pre-calculates code block metadata on post save and stores it in post_meta.
• Analyzes content on display to identify required assets.

2. JavaScript Dynamic Rendering

• The frontend engine starts on the DOMContentLoaded event.
• Based on the metadata, it highlights code using Shiki and renders diagrams using Mermaid.

Performance Optimization

• Lazy Loading: Heavy libraries (Shiki, Mermaid) are only loaded when required elements are present on the page.
• Caching: Uses WordPress Transient API to cache feature detection results and rendered data.