markdown-to-image

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Inkframe — Markdown to Image

Inkframe — Markdown转图片

Inkframe renders markdown content into polished, styled images via the inkframe.dev API. Run it via

npx inkframe

— no global install needed. The package includes a free shared API key, so it works out of the box.

Inkframe通过inkframe.dev API将markdown内容渲染为精美的带样式图片。你可以通过

npx inkframe

运行，无需全局安装。该包内置免费的共享API密钥，开箱即可使用。

Setup

安装配置

No setup needed — always run the CLI via

npx inkframe

. The package ships with a free shared API key, so it works out of the box with no signup.

无需任何配置——始终通过

npx inkframe

运行CLI即可。包自带免费共享API密钥，无需注册开箱即用。

Quick Start

快速开始

bash

undefined

bash

undefined

Simplest render — just give it markdown

最简单的渲染方式——直接传入markdown

npx inkframe render --content "# Hello World\n\nThis is styled." --output out.png

Render from a file

从文件渲染

npx inkframe render --content @post.md --output out.png

Use a template for instant styling

使用模板快速生成样式

npx inkframe render --template tmpl_PWfUUDlVw --content @post.md --output out.png

Preview in the browser (free, no API key needed)

在浏览器中预览（免费，无需API密钥）

npx inkframe open --content @post.md --design @design.json

undefined

npx inkframe open --content @post.md --design @design.json

undefined

CLI Commands

CLI命令

npx inkframe open

npx inkframe open

Opens the Inkframe playground in the browser with your content and design pre-loaded. Free, no API key needed — great for previewing and tweaking before rendering.

Flag	Description	Default
`-c, --content <text>`	Markdown string or `@file.md` to read from file	—
`-d, --design <json>`	Inline JSON or `@file.json`	—
`--base-url <url>`	Playground base URL	`https://www.inkframe.dev`

bash

npx inkframe open --content "# Hello World"
npx inkframe open --content @post.md --design @design.json

在浏览器中打开Inkframe playground，并预加载你的内容和设计。该功能免费，无需API密钥——非常适合在渲染前预览和调整样式。

标识	描述	默认值
`-c, --content <text>`	Markdown字符串或 `@file.md` 从文件读取内容	—
`-d, --design <json>`	内联JSON或 `@file.json`	—
`--base-url <url>`	Playground基础URL	`https://www.inkframe.dev`

bash

npx inkframe open --content "# Hello World"
npx inkframe open --content @post.md --design @design.json

npx inkframe render

npx inkframe render

Flag	Description	Default
`-c, --content <text>`	Markdown string or `@file.md` to read from file	Required (unless `--template` provides content)
`-t, --template <id>`	Template ID — applies its design (and content if `--content` omitted)	—
`-d, --design <json>`	Inline JSON or `@file.json` — overrides template design	—
`-o, --output <path>`	Save image to file (e.g. `out.png` ). Prints URL if omitted	prints URL
`-s, --scale <n>`	Scale factor: 1, 2, or 3	2
`-f, --file-type <fmt>`	Output format: `png` , `jpeg` , `webp`	`png`

Content uses the

prefix convention:

--content @notes.md

reads from

notes.md

, while

--content "# Title"

is inline markdown.

标识	描述	默认值
`-c, --content <text>`	Markdown字符串或 `@file.md` 从文件读取内容	必填（除非 `--template` 提供了内容）
`-t, --template <id>`	模板ID——应用模板的设计（如果省略 `--content` 则同时应用模板内容）	—
`-d, --design <json>`	内联JSON或 `@file.json` ——覆盖模板设计	—
`-o, --output <path>`	保存图片到文件（例如 `out.png` ）。如果省略则打印URL	打印URL
`-s, --scale <n>`	缩放比例：1、2或3	2
`-f, --file-type <fmt>`	输出格式： `png` 、 `jpeg` 、 `webp`	`png`

内容使用

前缀约定：

--content @notes.md

表示从

notes.md

读取内容，而

--content "# 标题"

则是内联markdown。

npx inkframe templates list

npx inkframe templates list

Lists all available templates with their IDs and names.

列出所有可用模板及其ID和名称。

npx inkframe templates get <id>

npx inkframe templates get <id>

Gets full template JSON. Add

--design-only

to get just the design object. Add

-o file.json

to save to file.

获取完整的模板JSON。添加

--design-only

仅获取设计对象。添加

-o file.json

保存到文件。

Available Templates

可用模板

ID	Name	Good for
`tmpl_650IbCa8k`	Tweet (Dark)	Dark-themed tweet screenshots
`tmpl_vm9wHdOtU`	Poem	Poetry, literary quotes
`tmpl_PWfUUDlVw`	Quote	Inspirational/pull quotes
`tmpl_DAtOcPEQE`	Business Poster	Professional announcements
`tmpl_W46vhIVoJ`	Tweet	Tweet-style cards
`tmpl_4LNNIaHHO`	DeepSeek问答	Q&A format (Chinese)
`tmpl_vOv0UwIwl`	Meme - Drake	Drake meme format
`tmpl_inxjqashV`	Tweet (Bilingual)	Bilingual tweet cards
`tmpl_9PbGi7zcJ`	Story (Bilingual)	Bilingual story format
`tmpl_qtYz45Xao`	Quote Card (Classic)	Classic styled quotes
`tmpl_lVArmW0pP`	Flowchart	Process/flow diagrams
`tmpl_pXED6toGN`	Quote Card	Modern quote cards
`tmpl_ciwTrec6U`	Tweet	Alternative tweet style
`tmpl_jKumMZX6E`	Testimonial	Customer testimonials
`tmpl_hSlqk3U8h`	Code Snippet	Code with syntax highlighting
`tmpl_KIHNN4CRg`	Carousel	Multi-slide carousel
`tmpl_0fJUHUTWs`	Listicle	Numbered/bulleted lists

Templates are designed to look good out of the box — their fonts, colors, backgrounds, and layouts are already curated to work well together. Resist the urge to override a template's design unless the user specifically asks for customization. A template used as-is will almost always look more polished than a hastily assembled custom design.

ID	名称	适用场景
`tmpl_650IbCa8k`	推文（深色）	深色主题推文截图
`tmpl_vm9wHdOtU`	诗歌	诗歌、文学名言
`tmpl_PWfUUDlVw`	名言	励志/引用名言
`tmpl_DAtOcPEQE`	商业海报	专业公告
`tmpl_W46vhIVoJ`	推文	推文风格卡片
`tmpl_4LNNIaHHO`	DeepSeek问答	问答格式（中文）
`tmpl_vOv0UwIwl`	梗图 - Drake	Drake梗图格式
`tmpl_inxjqashV`	推文（双语）	双语推文卡片
`tmpl_9PbGi7zcJ`	故事（双语）	双语故事格式
`tmpl_qtYz45Xao`	名言卡（经典款）	经典风格名言
`tmpl_lVArmW0pP`	流程图	流程/流程图解
`tmpl_pXED6toGN`	名言卡	现代风格名言卡
`tmpl_ciwTrec6U`	推文	替代款推文样式
`tmpl_jKumMZX6E`	推荐语	客户推荐证言
`tmpl_hSlqk3U8h`	代码片段	带语法高亮的代码
`tmpl_KIHNN4CRg`	轮播图	多页轮播内容
`tmpl_0fJUHUTWs`	清单文	编号/项目符号列表

模板都是经过设计开箱即用的——它们的字体、颜色、背景和布局都经过精心搭配，效果很好。除非用户明确要求自定义，否则不要覆盖模板的设计。直接使用模板几乎总是比匆忙组装的自定义设计看起来更精致。

Choosing the right template

选择合适的模板

Match the content to the template's purpose. When in doubt, inspect the template first with

inkframe templates get <id>

to see its content structure and design — then model your markdown after the template's content format for best results.

Quotes/sayings:
```
tmpl_qtYz45Xao
```
(Quote Card Classic) for elegant serif look,
```
tmpl_PWfUUDlVw
```
(Quote) for casual,
```
tmpl_pXED6toGN
```
(Quote Card) for modern
Code:
```
tmpl_hSlqk3U8h
```
(Code Snippet) — dark theme, window controls, syntax highlighting

Tweets/social:

tmpl_W46vhIVoJ

tmpl_650IbCa8k

(dark),

tmpl_ciwTrec6U

Long-form content:
```
tmpl_DAtOcPEQE
```
(Business Poster),
```
tmpl_0fJUHUTWs
```
(Listicle)
Testimonials:
```
tmpl_jKumMZX6E
```

根据内容匹配模板用途。如果不确定，先通过
inkframe templates get <id>
查看模板，了解它的内容结构和设计——然后按照模板的内容格式编写你的markdown以获得最佳效果。

名言/语录：
```
tmpl_qtYz45Xao
```
（经典款名言卡）适合优雅的衬线字体风格，
```
tmpl_PWfUUDlVw
```
（名言）适合休闲风格，
```
tmpl_pXED6toGN
```
（名言卡）适合现代风格
代码：
```
tmpl_hSlqk3U8h
```
（代码片段）——深色主题、窗口控制栏、语法高亮

推文/社交内容：

tmpl_W46vhIVoJ

、

tmpl_650IbCa8k

（深色）、

tmpl_ciwTrec6U

长内容：
```
tmpl_DAtOcPEQE
```
（商业海报）、
```
tmpl_0fJUHUTWs
```
（清单文）
推荐证言：
```
tmpl_jKumMZX6E
```

Custom designs (when templates aren't enough)

自定义设计（模板无法满足需求时）

Only reach for

--design

when the user wants something specific that no template provides — a particular aspect ratio, custom branding, or a specific color scheme. In that case, the best approach is:

Find the closest template:

npx inkframe templates get <id> --design-only --output design.json

Modify only the fields that need to change

Render with:

npx inkframe render --content @post.md --design @design.json --output out.png

For the full reference of all design fields (dimensions, backgrounds, color palettes, fonts, and more), read

references/design-options.md

in this skill's directory.

只有当用户需要模板无法提供的特定效果时才使用

--design

——比如特定的宽高比、自定义品牌标识或者特定的配色方案。这种情况下，最佳做法是：

找到最接近的模板：

npx inkframe templates get <id> --design-only --output design.json

仅修改需要变更的字段

渲染：

npx inkframe render --content @post.md --design @design.json --output out.png

要查看所有设计字段（尺寸、背景、调色板、字体等）的完整参考，请阅读该技能目录下的

references/design-options.md

文件。

Multi-Page Content

多页内容

Content can include

\pagebreak

to separate pages (e.g. for carousels or slideshows). The API renders one image per request — if your content has

\pagebreak

, only the first page is rendered. The inkframe.dev studio UI supports rendering all pages at once.

To render multi-page content, split it yourself and make one render call per page. Run them in parallel for speed:

bash

undefined

内容中可以包含

\pagebreak

来分隔页面（例如用于轮播图或幻灯片）。API每次请求渲染一张图片——如果你的内容有

\pagebreak

，只会渲染第一页。inkframe.dev studio UI支持一次性渲染所有页面。

要渲染多页内容，请自行拆分内容，每页调用一次渲染接口。可以并行运行以提升速度：

bash

undefined

Split content and render each page in parallel

拆分内容并并行渲染每页

npx inkframe render --content @page1.md --design @design.json --output slide1.png & npx inkframe render --content @page2.md --design @design.json --output slide2.png & npx inkframe render --content @page3.md --design @design.json --output slide3.png & wait


When building carousels or slideshows, write each page to a separate temp file, then render all pages in parallel using `&` and `wait`.


制作轮播图或幻灯片时，将每页内容写入单独的临时文件，然后使用`&`和`wait`并行渲染所有页面。

Design Pitfalls

设计注意事项

When

contentBoxVisibility

is false, text renders directly on the background with no box behind it. Avoid these combinations — the text becomes unreadable:

Dark

backgroundKey

+ light

colorPaletteKey

(which has dark text) +

contentBoxVisibility: false

Light

backgroundKey

+ dark

colorPaletteKey

(which has light text) +

contentBoxVisibility: false

Either keep the content box visible, or match the palette theme to the background.

当

contentBoxVisibility

为false时，文本会直接渲染在背景上，后面没有内容框。请避免以下组合——会导致文本无法阅读：

深色

backgroundKey

+ 浅色

colorPaletteKey

（包含深色文本） +

contentBoxVisibility: false

浅色

backgroundKey

+ 深色

colorPaletteKey

（包含浅色文本） +

contentBoxVisibility: false

要么保持内容框可见，要么让调色板主题和背景匹配。

Workflow Tips

工作流技巧

Try a template as-is first — the curated designs are almost always better than custom ones. Use
```
npx inkframe templates list
```
to browse, then render with
```
--template
```
.
Inspect before customizing —
```
npx inkframe templates get <id>
```
shows the template's content and design. Model your markdown after the template's content structure.
Customize sparingly — if you must customize, start from a template's design and change only what's needed. Don't build designs from scratch.
Preview with
npx inkframe open
— use
```
npx inkframe open --content @post.md --design @design.json
```
to open the playground in the browser for interactive previewing and tweaking. Free, no API key needed.
Write markdown to a temp file for anything longer than a line or two, then use
```
@file.md
```
. This avoids shell escaping issues with inline content.
Always use
--output
to save the image locally rather than just printing a URL.
Content is standard markdown — headings, bold, italic, lists, code blocks, and blockquotes all render as expected.

先直接尝试使用模板——经过设计的模板几乎总是比自定义的效果更好。使用
```
npx inkframe templates list
```
浏览模板，然后通过
```
--template
```
参数渲染。
自定义前先查看模板——
```
npx inkframe templates get <id>
```
可以查看模板的内容和设计。按照模板的内容结构编写你的markdown。
尽量少自定义——如果必须自定义，从模板的设计开始，仅修改需要的部分。不要从零开始构建设计。
使用
npx inkframe open
预览——使用
```
npx inkframe open --content @post.md --design @design.json
```
在浏览器中打开playground进行交互式预览和调整。该功能免费，无需API密钥。
对于超过一两行的内容，将markdown写入临时文件，然后使用
```
@file.md
```
引用。这可以避免内联内容的shell转义问题。
**始终使用
```
--output
```
**将图片保存到本地，而不仅仅是打印URL。
内容是标准markdown——标题、粗体、斜体、列表、代码块和块引用都可以正常渲染。