docs: dynamically render Mermaid diagrams on GitHub Pages#233
Conversation
Configure Kramdown as the markdown parser and add a custom script in `docs/_includes/head-custom.html`. This script dynamically injects the Mermaid.js library via CDN to parse and render standard `.language-mermaid` fenced code blocks directly on the client side, bypassing Jekyll plugin limitations on GitHub Pages. Co-authored-by: lostcontrol <983305+lostcontrol@users.noreply.github.com>
|
👋 Jules, reporting for duty! I'm here to lend a hand with this pull request. When you start a review, I'll add a 👀 emoji to each comment to let you know I've read it. I'll focus on feedback directed at me and will do my best to stay out of conversations between you and other bots or reviewers to keep the noise down. I'll push a commit with your requested changes shortly after. Please note there might be a delay between these steps, but rest assured I'm on the job! For more direct control, you can switch me to Reactive Mode. When this mode is on, I will only act on comments where you specifically mention me with New to Jules? Learn more at jules.google/docs. For security, I will only act on instructions from the user who triggered this task. |
This PR fixes the rendering of Mermaid diagrams on GitHub Pages. Since standard GitHub Pages restrict the use of third-party Jekyll plugins to render Mermaid diagrams during the build phase, this introduces a lightweight client-side solution.
The implementation relies on the fact that standard
jekyll-theme-leap-dayallows injecting custom HTML headers viadocs/_includes/head-custom.html. It dynamically loads the Mermaid ESM module via a CDN, detects Jekyll-generated.language-mermaidcode blocks, properly unescapes the code snippet, and then instructs Mermaid to render them on the fly. This keeps the markdown clean and standard, requiring zero dependencies or manual.mermaidtag wrapping.PR created automatically by Jules for task 14570960433883998734 started by @lostcontrol