用途:把代码片段生成适合社交媒体、推文、LinkedIn 和文档使用的高分辨率 PNG 图片,采用浅色主题、macOS 风格窗口外观。
主要能力:使用 HTML 模板配合 Chrome headless 渲染,默认视口 1200×675px、2 倍缩放,输出 2400×1350px。样式为暖白背景(#f0ece8)与卡片(#faf8f6),带红黄绿窗口圆点,字体 JetBrains Mono,禁用连字,代码字号默认 25px(较长用 23px,密集用 20px),无底部文字。语法高亮参考 GitHub-light,通过 span 类实现,如 .keyword、.string、.method、.class-name、.comment、.variable、.named-arg、.arrow、.punctuation、.env-key、.env-val、.number、.type。换行用 <br>,缩进用 (每级 4 个)。
使用方式:复制 assets/template.html 到临时文件,替换 <!-- FILENAME --> 为标题栏文字,替换 <!-- CODE CONTENT --> 为带高亮的 HTML,然后运行 scripts/render.sh /tmp/snippet.html /tmp/snippet.png。脚本参数为 <input.html> <output.png> [width] [height] [scale],默认 1200、675、2。2×2 网格图可复制 assets/grid-2x2.html,填入 4 组占位符后以 2400 1350 1 渲染,网格字号约 17px。
适用场景:社交媒体配图、推文、LinkedIn 帖子、文档插图。
限制:代码需保持简洁,面向社交分享而非完整文档;字号或卡片高度需按内容手动调整;长代码可能需要增大 body 高度;每个片段需单独 HTML 文件分别渲染。资料未提供安装步骤、依赖要求、收费与平台支持等更多信息。