MD to Share

# MD to Share / MD 转长图

A skill that converts Markdown files to long images, directly callable by AI Agents like OpenClaw and Claude Code. Perfect for sharing on WeChat, Discord, and other platforms.

将 Markdown 文件转换为原生长图的 skill，可使用 OpenClaw、Claude Code 等 AI Agent 直接调用。方便分享到微信、Discord 等平台。

Features / 特点

• Environment Auto-Detection: Automatically detects OpenClaw vs Claude Code and applies optimal settings
• High Resolution: Configurable width up to 1600px (2x scale factor) for crisp display
• Auto Theme: Light mode (6:00-18:00) / Dark mode (18:00-6:00) based on time
• Discord Optimized: JPEG format at 85% quality, auto-splits large files
• Cross-Platform: Auto-detects Chrome on macOS, Linux, and Windows
• Smart Splitting: Splits at semantic boundaries (headings, hr) not mid-paragraph
• Robust Error Handling: Clear exit codes for AI agents to understand failures

• 环境自动检测：自动检测 OpenClaw 或 Claude Code 环境，应用最优设置
• 高分辨率：可配置宽度最高 1600px（2x 缩放因子），在所有平台上清晰显示
• 自动主题：根据时间自动切换浅色（6:00-18:00）/ 深色（18:00-6:00）模式
• Discord 优化：JPEG 格式 85% 质量，自动切分大文件
• 跨平台：自动检测 macOS、Linux、Windows 上的 Chrome
• 智能切分：在语义边界（标题、分隔线）处切分，不会在段落中间
• 健壮错误处理：清晰的退出码，方便 AI Agent 理解错误

Quick Start / 快速使用

Use this skill when user asks to "forward", "convert to image", "share", "generate long image".

当用户要求"转发"、"转成图片"、"方便分享"、"生成长图"时使用此 skill。

Usage / 使用方法

1. Convert Command / 转换命令

```bash md2img <input.md> [output] [options] ```

Options / 选项:

| Option | Description | Default | |--------|-------------|---------| | `--preset=<name>` | Configuration preset: `openclaw` \| `generic` | Auto-detect | | `--width=<px>` | CSS width in pixels | Preset value | | `--scale=<factor>` | Device scale factor | 2 | | `--max-size=<MB>` | Max file size before splitting | Preset value | | `--quality=<1-100>` | JPEG quality | 85 | | `--theme=<light\|dark>` | Force theme | Auto by time |

• Output formats / 输出格式:
• `.jpg` / `.jpeg` - JPEG format (default, recommended for Discord)
• `.png` - PNG format (lossless, larger files)

Example / 示例： ```bash # Basic usage (auto-detects environment, outputs to document-长图.jpg) md2img "~/Downloads/document.md"

# Specify output path with format md2img "~/Downloads/document.md" "~/Downloads/output.jpg" md2img "~/Downloads/document.md" "~/Downloads/output.png"

# Force OpenClaw preset for 1200px output md2img "~/Downloads/document.md" --preset=openclaw

# Force generic preset for 1600px output md2img "~/Downloads/document.md" --preset=generic

# Custom parameters md2img "~/Downloads/document.md" --width=600 --scale=2 --max-size=5

# Force dark theme md2img "~/Downloads/document.md" --theme=dark ```

2. Configuration Presets / 配置预设

| Preset | CSS Width | Scale | Actual Width | Max Size | Use Case | |--------|-----------|-------|--------------|----------|----------| | `openclaw` | 600px | 2x | 1200px | 5MB | OpenClaw → Discord (optimized for compression) | | `generic` | 800px | 2x | 1600px | 8MB | Claude Code / local use (high resolution) |

| 预设 | CSS 宽度 | 缩放 | 实际宽度 | 最大文件 | 使用场景 | |------|----------|------|----------|----------|----------| | `openclaw` | 600px | 2x | 1200px | 5MB | OpenClaw → Discord（适配压缩层） | | `generic` | 800px | 2x | 1600px | 8MB | Claude Code / 本地使用（高分辨率） |

• Auto-Detection Logic / 自动检测逻辑:
• If `OPENCLAW_CHANNEL` or `OPENCLAW_SKILLS_DIR` env var exists → `openclaw` preset
• If current directory contains `.openclaw/skills` → `openclaw` preset
• Otherwise → `generic` preset

3. Send to Discord / 发送到 Discord

Use the message tool's media parameter: ```json { "action": "send", "target": "channel_id", "message": "Brief description", "media": "/full/path/to/image.jpg" } ```

• Note: If the converted image exceeds the size limit, it will be automatically split into multiple files:
• `output-1.jpg`, `output-2.jpg`, `output-3.jpg`, ...

注意：如果转换后的图片超过大小限制，会自动切分为多个文件。

4. Send to WeChat / 发送到微信

• Image is generated at the specified path
• Open file manager to get the image
• Or copy to clipboard and paste

Image Quality Optimization / 图片清晰度优化

OpenClaw + Discord Flow / OpenClaw + Discord 流程

1. OpenClaw has two layers of image compression:
2. Agent layer: `imageMaxDimensionPx=1200`, `maxBytes=5MB`
3. Media loading layer: `MAX_IMAGE_BYTES=6MB`, scales down from 2048px

1. OpenClaw 有两层图片压缩：
2. Agent 层：`imageMaxDimensionPx=1200`，`maxBytes=5MB`
3. 媒体加载层：`MAX_IMAGE_BYTES=6MB`，从 2048px 逐步缩小

Recommended / 推荐: Use `--preset=openclaw` to output 1200px images under 5MB. This bypasses both compression layers.

推荐：使用 `--preset=openclaw` 输出 1200px 且小于 5MB 的图片，这样可以绕过两层压缩。

``` With openclaw preset / 使用 openclaw 预设: Skill outputs 1200px (< 5MB) ↓ Agent layer: 1200px ≤ 1200px → No compression ✓ ↓ Media layer: 5MB < 6MB → No compression ✓ ↓ User receives: 1200px (guaranteed) / 用户收到：1200px（确定） ```

Final Resolution Reference / 最终分辨率参考

| Environment | Preset | Final Width | Notes | |-------------|--------|-------------|-------| | OpenClaw + Discord | `openclaw` | 1200px | Bypasses compression | | Claude Code | `generic` | 1600px | Full resolution | | Custom | User-defined | Variable | Full control |

Exit Codes / 退出码

When the skill fails, check the exit code to understand the error:

| Code | Name | Description | |------|------|-------------| | 0 | SUCCESS | Conversion completed successfully | | 1 | INVALID_ARGS | Missing or invalid command line arguments | | 2 | FILE_NOT_FOUND | Input markdown file does not exist | | 3 | FILE_READ_ERROR | Cannot read the input file (permissions, encoding) | | 4 | CHROME_NOT_FOUND | Chrome/Chromium browser not found on system | | 5 | BROWSER_LAUNCH_ERROR | Failed to launch browser | | 6 | RENDER_ERROR | Failed to render the HTML content | | 7 | SCREENSHOT_ERROR | Failed to capture screenshot | | 8 | OUTPUT_WRITE_ERROR | Cannot write to output location |

当 skill 失败时，检查退出码以理解错误：

| 代码 | 名称 | 描述 | |------|------|-------------| | 0 | 成功 | 转换成功完成 | | 1 | 参数无效 | 缺少或无效的命令行参数 | | 2 | 文件未找到 | 输入的 markdown 文件不存在 | | 3 | 文件读取错误 | 无法读取输入文件（权限、编码） | | 4 | Chrome 未找到 | 系统上未找到 Chrome/Chromium 浏览器 | | 5 | 浏览器启动错误 | 无法启动浏览器 | | 6 | 渲染错误 | 无法渲染 HTML 内容 | | 7 | 截图错误 | 无法捕获截图 | | 8 | 输出写入错误 | 无法写入输出位置 |

Configuration / 配置

Environment Variables / 环境变量

| Variable | Description | Example | |----------|-------------|---------| | `CHROME_PATH` | Override Chrome executable path | `/usr/bin/chromium` | | `OPENCLAW_CHANNEL` | OpenClaw channel (auto-detection) | - | | `OPENCLAW_SKILLS_DIR` | OpenClaw skills directory (auto-detection) | - |

Default Settings by Preset / 各预设默认设置

• OpenClaw preset:
• Width: 600px CSS (1200px actual with 2x scale)
• Max file size: 5MB (auto-splits if larger)

• Generic preset:
• Width: 800px CSS (1600px actual with 2x scale)
• Max file size: 8MB (auto-splits if larger)

• Common:
• Format: JPEG at 85% quality
• Timeout: 30 seconds
• Theme: Light mode 6:00-18:00, Dark mode 18:00-6:00

Dependencies / 依赖

• Node.js 18+
• puppeteer-core
• marked
• Google Chrome or Chromium (uses system-installed browser)

Dependencies are installed at `~/.openclaw/skills/md-to-share/node_modules/`

Styling / 样式说明

• Generated image styles:
• H1: Large font with red bottom border
• H2: Blue left border accent
• H3: Gray color, smaller than H2
• Tables: Zebra stripes with hover highlight
• Code blocks: Dark background
• Inline code: Light gray background with red text
• Blockquotes: Blue border + light gray background
• Horizontal rules: Elegant dividers

Example / 示例

1. When user says "share this to WeChat" or "make it easy to forward":
2. Read the MD file content
3. Run `md2img` to convert to long image
4. Tell user the image path, or send directly to the specified platform

Troubleshooting / 故障排除

Chrome not found / Chrome 未找到

Set the CHROME_PATH environment variable: ```bash # macOS/Linux export CHROME_PATH="/Applications/Chromium.app/Contents/MacOS/Chromium"

# Windows set CHROME_PATH=C:\Program Files\Chromium\Application\chrome.exe ```

Image too large / 图片太大

• The tool automatically splits images at semantic boundaries (headings, horizontal rules). If you still have issues:
• Use JPEG format (default) instead of PNG
• Use `--max-size` to set a smaller split threshold
• Consider splitting your markdown into smaller files

Image quality too low in OpenClaw / OpenClaw 图片清晰度低

Make sure you're using the `openclaw` preset (should auto-detect): ```bash md2img input.md --preset=openclaw ```

This ensures 1200px output that bypasses OpenClaw's compression layers.