Alchemy Lab

Markdown Formatter - Chinese Typography Tool

Professional Chinese Markdown formatting and rendering. Typography tool.

Professional Chinese Markdown formatting and rendering. Typography tool.

Core Features

  • 📝 14 Formatting Styles: WeChat, Zhihu, Juejin, GitHub, etc.
  • 🎨 Multi-theme Support: Light/dark mode, multiple code highlighting themes
  • 📱 Multi-platform Adaptation: Export to WeChat, Zhihu and other platforms
  • 🖼️ Image Export: High-quality PNG/SVG image export
  • ⚡ Real-time Preview: Edit and preview instantly, WYSIWYG

Quick Start

Online Use

Visit md.izoa.fun to start formatting:

  1. Enter Markdown content on the left
  2. Real-time preview rendering on the right
  3. Select target platform style (WeChat/Zhihu/Juejin, etc.)
  4. Copy HTML or export image

CLI Tool

# Install
npm install -g markdown-formatter

# Usage
mdfmt input.md -o output.html --style wechat

# Batch conversion
mdfmt docs/*.md -o dist/ --style zhihu

Supported Styles

Platform Description Features
WeChat WeChat Official Account formatting Adapted for WeChat editor
Zhihu Zhihu article formatting Clean and professional
Juejin Juejin community formatting Developer-friendly
GitHub GitHub README Technical documentation style
Jianshu Jianshu article formatting Literary and fresh
CSDN CSDN blog formatting Tech community
...More 14+ platform styles Continuously updated

Typography Features

Chinese Optimization

  • Punctuation Squeezing: Auto-compress full-width punctuation
  • Font Fallback: Elegant Chinese-English font pairing
  • Line Height Adjustment: Line height suitable for Chinese reading
  • Paragraph Spacing: Reasonable paragraph whitespace

Code Highlighting

  • 20+ Themes: Dracula, Nord, One Dark, etc.
  • Language Support: 200+ programming languages
  • Line Numbers: Optional line number display
  • Copy Button: One-click code copy

Math Formulas

  • KaTeX Rendering: Fast math formula rendering
  • Inline/Block: Support inline and block formulas
  • LaTeX Syntax: Complete LaTeX math syntax

Example:

Inline formula: $E = mc^2$

Block formula:
$$
\int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}
$$

Use Cases

1. WeChat Official Account Formatting

Edit Markdown → Select "WeChat" style → Copy HTML → Paste into WeChat editor

2. Technical Documentation

Write README.md → Select "GitHub" style → Export PNG image → Use for demo

3. Blog Articles

Write blog → Select "Zhihu" style → Copy HTML → Publish to Zhihu

4. Tutorial Creation

Write tutorial → Select "Juejin" style → Export image → Create PPT

Tech Stack

  • Frontend: TanStack Start (React-based) + TypeScript
  • Editor: CodeMirror 6 (editing experience)
  • Rendering: Marked + highlight.js
  • Math Formulas: KaTeX
  • Styling: Tailwind CSS + custom themes
  • Deployment: Vercel + Cloudflare CDN

Performance Metrics

Metric Value
First Load ~500ms
Preview Latency <50ms (debounced)
Image Export ~1-3s
Document Size Support <1MB (recommended)

API Reference

POST /api/render - Render Markdown

curl -X POST https://md.izoa.fun/api/render \
  -H "Content-Type: application/json" \
  -d '{
    "markdown": "# Hello\n\nWorld",
    "style": "wechat",
    "theme": "light"
  }'

Response:

{
  "html": "<div class=\"markdown-body\">...</div>",
  "css": ".markdown-body { ... }"
}

POST /api/export - Export Image

curl -X POST https://md.izoa.fun/api/export \
  -H "Content-Type: application/json" \
  -d '{
    "html": "<div>...</div>",
    "format": "png"
  }'

Response: Binary image data (PNG/SVG)

Limits and Constraints

  • Document Size: Recommend <1MB (>1MB may affect performance)
  • Image Export: Max 4096x4096 pixels
  • Real-time Preview: Debounce delay 300ms
  • Code Blocks: Single code block <10000 lines

Source and Deployment

Related Resources

Feedback and Support