# Markdown Code To Image (`ai-coding-radar/markdown-code-to-image`) Actor

Convert Markdown, code snippets, tables, quotes, and AI answers into polished downloadable PNG images. Batch rendering API for n8n, Make, Zapier, newsletters, docs, and social media.

- **URL**: https://apify.com/ai-coding-radar/markdown-code-to-image.md
- **Developed by:** [AI Coding Radar](https://apify.com/ai-coding-radar) (community)
- **Categories:** Automation, Developer tools, Open source
- **Stats:** 2 total users, 1 monthly users, 100.0% runs succeeded, 0 bookmarks
- **User rating**: No ratings yet

## Pricing

from $5.00 / 1,000 generated images

This Actor is paid per event. You are not charged for the Apify platform usage, but only a fixed price for specific events.

Learn more: https://docs.apify.com/platform/actors/running/actors-in-store#pay-per-event

## What's an Apify Actor?

Actors are web data automations that power AI and operations. They run on the Apify platform to scrape websites, process data, connect APIs, and automate workflows.
In Batch mode, an Actor accepts a well-defined JSON input, performs an action which can take anything from a few seconds to a few hours,
and optionally produces a well-defined JSON output, datasets with results, or files in key-value store.
In Standby mode, an Actor provides a web server which can be used as a website, API, or an MCP server.
Actors are written with capital "A".

## How to integrate an Actor?

If asked about integration, you help developers integrate Actors into their projects.
You adapt to their stack and deliver integrations that are safe, well-documented, and production-ready.
The best way to integrate Actors is as follows.

- **AI agents and MCP clients** — the [Apify MCP server](https://docs.apify.com/integrations/mcp.md) at `https://mcp.apify.com` (remote, streamable HTTP, OAuth on first use).
- **Agentic workflows and local Actor development** — [Agent Skills](https://apify.com/.well-known/agent-skills/index.json) with the [Apify CLI](https://docs.apify.com/cli/docs.md): `npm install -g apify-cli`, then `apify login`.
- **JavaScript/TypeScript projects** — the official [JS/TS client](https://docs.apify.com/api/client/js/docs.md): `npm install apify-client`.
- **Python projects** — the official [Python client](https://docs.apify.com/api/client/python/docs.md): `pip install apify-client`.
- **Any other language** — the [REST API](https://docs.apify.com/api/v2.md).

For usage examples, see the [API](#api) section below.

For more details, see Apify documentation as [Markdown index](https://docs.apify.com/llms.txt) and [Markdown full-text](https://docs.apify.com/llms-full.txt).

# README

## Markdown & Code to Image API

Turn Markdown, code snippets, tables, quotes, and AI answers into polished PNG
images through Apify. Use it from the Console, API, n8n, Make, Zapier, or a
schedule. It is a rendering API, not a web scraper: no login, proxy, source
website, or external API key is required.

![Example Markdown and code rendered as a PNG](https://raw.githubusercontent.com/Jarvis-Dong/markdown-code-to-image/main/docs/markdown-code-to-image-preview.png)

- [Run the Actor on Apify](https://apify.com/ai-coding-radar/markdown-code-to-image)
- [Try the public Markdown-to-PNG example](https://apify.com/ai-coding-radar/markdown-code-to-image/examples/render-markdown-and-code-to-a-png)
- [Convert a ChatGPT Markdown answer to PNG](https://apify.com/ai-coding-radar/markdown-code-to-image/examples/chatgpt-markdown-answer-to-png)
- [Connect it to an AI agent with Apify MCP](https://apify.com/ai-coding-radar/markdown-code-to-image/api/mcp)

### What it is for

- Markdown to image automation for newsletters and social posts.
- Code screenshot generation with syntax highlighting.
- ChatGPT, Claude, or Gemini answer cards without browser copy/paste work.
- Batch quote cards, changelog images, and documentation previews.

Each successful document creates one Dataset record and one PNG in the run's
default key-value store. The Dataset record contains a direct `imageUrl`.
Storage retention follows the caller's Apify plan and storage settings; copy a
file elsewhere if it needs to be permanent.

### Input

````json
{
  "documents": [
    {
      "title": "Ship the small thing",
      "markdown": "# Markdown to image\n\nTurn **notes** and code into a PNG.\n\n```js\nconst result = await automate();\n```"
    }
  ],
  "theme": "paper",
  "width": 1080,
  "fontSize": 22,
  "watermark": "Made with Cardify"
}
````

Available themes are `paper`, `midnight`, `terminal`, and `clean`. A run accepts
1-20 documents. Each Markdown value is capped at 12,000 characters and each
rendered image at 16,000 pixels high so oversized input fails explicitly.

### Automation API

Set `APIFY_TOKEN` in your secret manager, then call the synchronous Dataset
endpoint from a shell, n8n HTTP Request node, or Make HTTP module:

```sh
curl -sS -X POST \
  "https://api.apify.com/v2/acts/ai-coding-radar~markdown-code-to-image/run-sync-get-dataset-items?token=$APIFY_TOKEN" \
  -H 'content-type: application/json' \
  -d '{"documents":[{"title":"Release note","markdown":"# Shipped\n\nThe useful change is live."}],"theme":"paper","width":1080,"fontSize":22,"watermark":""}'
```

The response is an array with one record per generated PNG. Download the
signed `imageUrl` from each record before the run storage expires. Never put an
Apify token in a workflow exported to a public repository. The generated API
client's empty `{}` input is also safe: it renders exactly one bounded default
card so a first call produces a visible result instead of failing validation.

### Automation recipes

Copy the [n8n batch Markdown-to-image API workflow](examples/n8n-markdown-code-to-image.json)
or the [Make batch recipe](examples/make-markdown-code-to-image.json). Both
send the same [validated input body](examples/batch-input.json) and return one
dataset record per PNG. The examples cover a `markdown to image API`, a
`code screenshot API`, and an `OG image` card without fetching remote assets.

The n8n workflow reads the caller's `APIFY_TOKEN` environment variable. The
Make recipe keeps bearer authorization in a private Make connection or secret
field. Neither example includes a token, cookie, private webhook URL, or a
signed `imageUrl`; map each runtime `imageUrl` to the next automation step.
See [`examples/README.md`](examples/README.md) for setup, batching limits, and
downstream file handling.

### Security and limits

Raw HTML is disabled. Markdown images are replaced with alt text, and the
rendering page blocks network requests. This prevents user content from turning
the Actor into a request proxy or silently loading tracking pixels. The first
version outputs PNG only and uses system fonts; it does not fetch remote fonts,
images, Mermaid diagrams, or arbitrary HTML.

### Local verification

```sh
npm install
npm test
npm run smoke
```

The smoke command writes `/tmp/markdown-code-to-image-smoke.png` using local
Chrome. The Apify image uses the official Playwright Chrome base image.

### Pricing

The launch price is `$0.005` per generated image plus `$0.00005` per Actor start.
Platform usage is included. Test runs, free users, and generated image counts
are not creator revenue; only a finalized payout that actually settles is
treated as income.

# Actor input Schema

## `documents` (type: `array`):

Each item needs Markdown and may include a short title.

## `theme` (type: `string`):

Visual style shared by every image in this run.

## `width` (type: `integer`):

Outer PNG width in pixels.

## `fontSize` (type: `integer`):

Base body text size in pixels.

## `watermark` (type: `string`):

Use an empty string to remove the footer.

## Actor input object example

````json
{
  "documents": [
    {
      "title": "A useful answer",
      "markdown": "# Markdown to image\n\nTurn **notes**, tables, and highlighted code into a shareable PNG.\n\n```js\nconst result = await automate();\n```"
    }
  ],
  "theme": "paper",
  "width": 1080,
  "fontSize": 22,
  "watermark": "Made with Cardify"
}
````

# Actor output Schema

## `results` (type: `string`):

No description

# API

You can run this Actor programmatically using our API. Below are code examples in JavaScript, Python, and CLI, as well as the OpenAPI specification and MCP server setup.

## JavaScript example

```javascript
import { ApifyClient } from 'apify-client';

// Initialize the ApifyClient with your Apify API token
// Replace the '<YOUR_API_TOKEN>' with your token
const client = new ApifyClient({
    token: '<YOUR_API_TOKEN>',
});

// Prepare Actor input
const input = {};

// Run the Actor and wait for it to finish
const run = await client.actor("ai-coding-radar/markdown-code-to-image").call(input);

// Fetch and print Actor results from the run's dataset (if any)
console.log('Results from dataset');
console.log(`💾 Check your data here: https://console.apify.com/storage/datasets/${run.defaultDatasetId}`);
const { items } = await client.dataset(run.defaultDatasetId).listItems();
items.forEach((item) => {
    console.dir(item);
});

// 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/js/docs

```

## Python example

```python
from apify_client import ApifyClient

# Initialize the ApifyClient with your Apify API token
# Replace '<YOUR_API_TOKEN>' with your token.
client = ApifyClient("<YOUR_API_TOKEN>")

# Prepare the Actor input
run_input = {}

# Run the Actor and wait for it to finish
run = client.actor("ai-coding-radar/markdown-code-to-image").call(run_input=run_input)

# Fetch and print Actor results from the run's dataset (if there are any)
print(f"💾 Check your data here: https://console.apify.com/storage/datasets/{run.default_dataset_id}")
for item in client.dataset(run.default_dataset_id).iterate_items():
    print(item)

# 📚 Want to learn more 📖? Go to → https://docs.apify.com/api/client/python/docs/quick-start

```

## CLI example

```bash
echo '{}' |
apify call ai-coding-radar/markdown-code-to-image --silent --output-dataset

```

## MCP server setup

```json
{
    "mcpServers": {
        "apify": {
            "type": "http",
            "url": "https://mcp.apify.com/?tools=fetch-actor-details,ai-coding-radar/markdown-code-to-image"
        }
    }
}

```

The hosted server signs you in with OAuth on first connect, so no API token belongs in this config. Clients without OAuth support can send an `Authorization: Bearer <APIFY_API_TOKEN>` header instead, using a token from API & Integrations in Apify Console (https://console.apify.com/settings/integrations).

## OpenAPI specification

Download the OpenAPI definition: https://api.apify.com/v2/actors/CVrdTuWe36RIGg8XV/builds/rysT8WEuMPxC7HJND/openapi.json