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.
This repository is a collection of web demos and examples for MathJax version 4, the JavaScript math rendering library. It demonstrates various ways to integrate MathJax into web pages, including standard TeX/MathML input with CHTML/SVG output, equation numbering and referencing, interactive reveal/toggle steps, speech generation, and compatibility with MathJax v2 configurations. The repo also contains a substantial custom font extension named 'mathjax-newcm' (New Computer Modern) that provides extensive glyph metrics and SVG path data for mathematical typesetting, with a specific focus on braille output (the 'euro-braille' subdirectory). This font data is split into dynamic chunks loaded on demand by MathJax. The codebase is primarily illustrative—each demo is a self-contained HTML page with accompanying JavaScript. The custom component and TeX extension examples show how to build tailored MathJax bundles using internal APIs. The configuration converter is a standalone utility that parses legacy MathJax v2 configuration objects and generates equivalent v4 configuration. While the demos are functional and well-organized, the font data files are minified/generated artifacts that are difficult to maintain manually, and several parts rely on MathJax internal APIs that may change across versions. The euro-braille and euro-braille-old directories contain near-duplicate font data with version drift, indicating a maintenance challenge. Overall, this repo serves as a practical reference for MathJax v4 integration patterns and custom font development, but it is not a production library itself. The most reusable components are the custom component assembly pattern, the TeX extension template, and the configuration converter utility.