$ show xiaolinbaba/xiaolin-madopic
Madopic is a client-side web application that converts Markdown content into images (PNG, PDF, HTML) with support for mathematical formulas, diagrams, charts, and custom styling. It operates as a single-page application with a split-screen interface: users write Markdown in the left editor and see a live preview on the right. The application processes Markdown through a pipeline that includes syntax highlighting, formula rendering (via KaTeX/mhchem), diagram rendering (via Mermaid), chart rendering (via ECharts), and custom card syntax, all before updating the preview. The application emphasizes a seamless user experience with real-time previews, customizable themes (background, font size, layout), and multiple export options. It implements sophisticated features like offline image persistence using IndexedDB with an in-memory cache, a protected token system to prevent interference between different Markdown extensions (such as preventing math formula replacements inside code blocks), and exact export cloning to ensure that the exported image matches the preview precisely, including handling of specific aspect ratios for platforms like Xiaohongshu and WeChat Moments. Built with vanilla HTML, CSS, and JavaScript, Madopic relies on several CDN-hosted libraries for its core functionality but maintains a lightweight, dependency-conscious architecture. The application is designed as a progressive web app (PWA) and includes features like local draft autosave, keyboard shortcuts, and responsive design to cater to a wide range of use cases from academic to social media content creation.
The LLM identified 2 files worth highlighting for reuse:
A simple publish-subscribe state management pattern that allows components to subscribe to state changes and react accordingly. It is self-contained, dependency-free, and can be extracted into any project to manage local state without relying on a framework. The implementation includes get/set methods and subscription handling with automatic cleanup.
A utility function that protects specific segments of a string (such as code blocks, inline code, links, and math formulas) while allowing transformations on the rest of the string. It returns the protected string and a restore function to revert the protections. This prevents common errors in template processing where replacements might interfere with protected syntax, demonstrating non-obvious skill in handling complex text transformations.