md-to-share

将 Markdown 文件转换为原生长图的 skill,可被 OpenClaw、Claude Code 等 AI Agent 直接调用。A skill that converts Markdown to long images, callable by AI Agents like OpenClaw and Claude Code.

Safety Notice

This listing is from the official public ClawHub registry. Review SKILL.md and referenced scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "md-to-share" with this command: npx skills add dtacheng/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

  • Self-Contained: Bundled Chromium via Playwright — no system browser needed

  • 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% 质量,自动切分大文件

  • 独立运行:内置 Playwright Chromium,无需系统安装浏览器

  • 智能切分:在语义边界(标题、分隔线)处切分,不会在段落中间

  • 健壮错误处理:清晰的退出码,方便 AI Agent 理解错误

Quick Start / 快速使用

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

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

⚠️ Decision Flow for Agents / Agent 决策流程

IMPORTANT: Before calling md2img, determine the target channel first.

用户要求生成图片
  ├── 明确要发到 Discord → 使用 --channel=discord(自动切图,确保清晰)
  ├── 明确要发到 WeChat  → 使用 --channel=wechat(保留长图,微信原生支持)
  ├── 明确要发到 iMessage → 使用 --channel=imessage(保留长图)
  ├── 本地使用 / 保存文件  → 使用 --channel=local(保留长图)
  └── 不确定目标渠道      → ❗ 先反问用户确认渠道,再执行

Why this matters: Discord has strict image dimension limits (images taller than ~2000px get scaled down to unreadable sizes). WeChat and iMessage handle long images natively — splitting would break the reading experience.

为什么这很重要:Discord 对图片尺寸有严格限制(超过 ~2000px 高的图会被缩放到无法阅读)。微信和 iMessage 原生支持长图 — 切分反而会破坏阅读体验。

Usage / 使用方法

1. Convert Command / 转换命令

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

Options / 选项:

OptionDescriptionDefault
--preset=<name>Configuration preset: openclaw | genericAuto-detect
--channel=<name>Target channel: discord | wechat | imessage | localNone
--width=<px>CSS width in pixelsPreset value
--scale=<factor>Device scale factor2
--max-size=<MB>Max file size before splittingPreset value
--max-height=<px>Max pixel height per imageChannel value
--quality=<1-100>JPEG quality85
--theme=<light|dark>Force themeAuto by time
--timeout=<ms>Browser operation timeout30000

Channel behavior / 渠道行为:

ChannelSplittingReason
discord✅ Auto-split at 1800px heightDiscord scales tall images, making them unreadable
wechat❌ Keep long imageWeChat handles long images natively
imessage❌ Keep long imageiMessage handles long images well
local❌ Keep long imageNo platform constraints
Not specified❌ No splittingDefault safe behavior

Output formats / 输出格式:

  • .jpg / .jpeg - JPEG format (default, recommended)
  • .png - PNG format (lossless, larger files)

Example / 示例:

# For Discord (auto-split for readability)
md2img report.md report.jpg --preset=openclaw --channel=discord

# For WeChat (keep as long image)
md2img report.md report.jpg --preset=openclaw --channel=wechat

# For local use (no splitting)
md2img report.md report.jpg

# Force dark theme
md2img report.md report.jpg --theme=dark

2. Configuration Presets / 配置预设

PresetCSS WidthScaleActual WidthMax SizeUse Case
openclaw600px2x1200px5MBOpenClaw → Discord (optimized for compression)
generic800px2x1600px8MBClaude Code / local use (high resolution)
预设CSS 宽度缩放实际宽度最大文件使用场景
openclaw600px2x1200px5MBOpenClaw → Discord(适配压缩层)
generic800px2x1600px8MBClaude Code / 本地使用(高分辨率)

Auto-Detection Logic / 自动检测逻辑:

  • If OPENCLAW_CHANNEL or OPENCLAW_SKILLS_DIR env var exists → openclaw preset
  • If current directory contains .openclaw/skillsopenclaw preset
  • Otherwise → generic preset

3. Send to Discord / 发送到 Discord

Use the message tool's media parameter:

{
  "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 流程

OpenClaw has two layers of image compression:

  1. Agent layer: imageMaxDimensionPx=1200, maxBytes=5MB
  2. Media loading layer: MAX_IMAGE_BYTES=6MB, scales down from 2048px

OpenClaw 有两层图片压缩:

  1. Agent 层imageMaxDimensionPx=1200maxBytes=5MB
  2. 媒体加载层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 / 最终分辨率参考

EnvironmentPresetFinal WidthNotes
OpenClaw + Discordopenclaw1200pxBypasses compression
Claude Codegeneric1600pxFull resolution
CustomUser-definedVariableFull control

Exit Codes / 退出码

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

CodeNameDescription
0SUCCESSConversion completed successfully
1INVALID_ARGSMissing or invalid command line arguments
2FILE_NOT_FOUNDInput markdown file does not exist
3FILE_READ_ERRORCannot read the input file (permissions, encoding)
4BROWSER_NOT_FOUNDPlaywright Chromium not installed (run: npx playwright install chromium)
5BROWSER_LAUNCH_ERRORFailed to launch browser
6RENDER_ERRORFailed to render the HTML content
7SCREENSHOT_ERRORFailed to capture screenshot
8OUTPUT_WRITE_ERRORCannot write to output location

当 skill 失败时,检查退出码以理解错误:

代码名称描述
0成功转换成功完成
1参数无效缺少或无效的命令行参数
2文件未找到输入的 markdown 文件不存在
3文件读取错误无法读取输入文件(权限、编码)
4浏览器未安装Playwright Chromium 未安装(运行: npx playwright install chromium)
5浏览器启动错误无法启动浏览器
6渲染错误无法渲染 HTML 内容
7截图错误无法捕获截图
8输出写入错误无法写入输出位置

Configuration / 配置

Environment Variables / 环境变量

VariableDescriptionExample
CHROME_PATHOverride Playwright's bundled Chromium/usr/bin/chromium
MD2IMG_TIMEOUTOverride default 30s timeout (ms)60000
OPENCLAW_CHANNELOpenClaw channel (auto-detection)-
OPENCLAW_SKILLS_DIROpenClaw 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+
  • playwright (bundles its own Chromium — no system browser required)
  • marked (markdown parser)

Install: npm install or bun install (postinstall automatically downloads Chromium)

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 / 示例

When user says "share this to WeChat" or "make it easy to forward":

  1. Read the MD file content
  2. Run md2img to convert to long image
  3. Tell user the image path, or send directly to the specified platform

Troubleshooting / 故障排除

Browser not found / 浏览器未安装

Playwright's bundled Chromium should be installed automatically during npm install. If not:

npx playwright install chromium

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):

md2img input.md --preset=openclaw

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

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

Automation

CloudCreate Tools

Enumerates CloudCreate.ai (https://cloudcreate.ai) in-browser tool capabilities and builds shareable links with locale (en/zh) for production or self-hosted...

Registry SourceRecently Updated
480Profile unavailable
Research

LLM Wiki Karpathy

Manage and maintain a Markdown wiki with LLM Wiki Karpathy: inspect, repair, compile sources, add pages, answer queries, and lint for quality.

Registry SourceRecently Updated
1050Profile unavailable
Research

LLM Knowledge Bases

Inspired by a public workflow shared by Andrej Karpathy (@karpathy). From raw research to a living Markdown knowledge base that compounds with every question...

Registry SourceRecently Updated
2450Profile unavailable
Automation

Article Summary Card

Summarize articles or webpages into structured bundles exported as JSON, Markdown, HTML, and PNG with consistent layout and tagging.

Registry SourceRecently Updated
1840Profile unavailable