Ảnh chụp code (kiểu Carbon) API

Biến mã nguồn thành ảnh đẹp như carbon.now.sh: tô màu cú pháp cho 29 ngôn ngữ, 9 giao diện màu, khung cửa sổ, số dòng, tô sáng dòng.

GETPOSThttps://apibox.io.vn/v1/code-image

Gửi code và nhận ảnh đoạn code trong khung cửa sổ kiểu macOS, sẵn sàng cho bài blog, slide, bài đăng mạng xã hội hay tin nhắn Zalo / Slack. Tô màu cú pháp dùng highlight.js (BSD-3) với 29 ngôn ngữ được nạp riêng từng cái (JavaScript, TypeScript, Python, Java, C, C++, C#, Go, Rust, PHP, Ruby, Swift, Kotlin, Dart, SQL, Bash, Shell, PowerShell, JSON, YAML, HTML / XML, CSS, SCSS, Markdown, Dockerfile, diff, INI / TOML, Lua, văn bản thường) và tự nhận diện với language=auto. Giao diện màu: dracula (mặc định), monokai, one-dark, github-dark, github-light, nord, night-owl, vscode-dark, solarized-light.

Tùy chọn: title trên thanh cửa sổ, window=false để bỏ khung, line_numbers=true cùng first_line, highlight_lines=3,5-7, font_size, line_height, tab_size, lề ngoài padding với màu background hoặc gradient chéo (background2), shadow, và max_columns (dòng dài hơn bị cắt). Chữ được vẽ từ đường nét phông JetBrains Mono (SIL OFL) có đủ tiếng Việt, nên chú thích như // Tính tổng hiển thị đúng dấu; ký tự không có trong phông nhúng (emoji, chữ Hán…) để trống kèm cảnh báo.

Định dạng: png (mặc định, scale 2 cho màn hình retina), svg (vector, ký tự là đường nét nên hiển thị giống nhau ở mọi nơi) hoặc json (SVG + PNG base64). Không dùng trình duyệt headless; tối đa 400 dòng.

Tham số

TênVị tríKiểuBắt buộcMặc định
codebody|querystringcóMã nguồn (tối đa 30.000 ký tự, 400 dòng); có thể gửi body thô text/plain.
languagequery|bodystringkhôngautoauto hoặc một trong: javascript, typescript, python, java, c, cpp, csharp, go, rust, php, ruby, swift, kotlin, dart, sql, bash, shell, powershell, json, yaml, xml, css, scss, markdown, dockerfile, diff, ini, lua, plaintext (dùng được tên tắt như js, ts, py, sh, html).
themequery|bodystringkhôngdraculadracula, monokai, one-dark, github-dark, github-light, nord, night-owl, vscode-dark, solarized-light.
formatquery|bodystringkhôngpngpng, svg hoặc json.
titlequery|bodystringkhôngTiêu đề cửa sổ, ví dụ tên file.
windowquery|bodybooleankhôngtrueVẽ thanh cửa sổ với ba nút tròn.
line_numbersquery|bodybooleankhôngfalseHiện số dòng.
first_linequery|bodynumberkhông1Số thứ tự của dòng đầu tiên.
highlight_linesquery|bodystringkhôngCác dòng cần tô sáng, ví dụ 2,4-6.
font_sizequery|bodynumberkhông14Cỡ chữ, px (8–40).
line_heightquery|bodynumberkhông1.6Chiều cao dòng, bội số của cỡ chữ (1–3).
tab_sizequery|bodynumberkhông4Số dấu cách cho mỗi tab (1–8).
paddingquery|bodynumberkhông32Lề ngoài, px (0–200).
backgroundquery|bodystringkhông#abb8c3Màu nền ngoài hoặc transparent.
background2query|bodystringkhôngMàu thứ hai để nền ngoài thành gradient chéo.
shadowquery|bodybooleankhôngtrueĐổ bóng mờ dưới cửa sổ.
max_columnsquery|bodynumberkhông160Dòng dài hơn sẽ bị cắt (20–400).
scalequery|bodynumberkhông2Tỷ lệ điểm ảnh của PNG (1–4).

Ví dụ

curl -X POST "https://apibox.io.vn/v1/code-image" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{"code":"const sum = (a, b) => a + b;\nconsole.log(sum(2, 3)); // 5","language":"javascript","format":"json"}'

Kết quả trả về

{
  "language": "javascript",
  "theme": "dracula",
  "lines": 2,
  "width": 344,
  "height": 178,
  "scale": 2,
  "svg": "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\" width=\"344\" height=\"178\" viewBox=\"0 0 344 178\">…</svg>",
  "png_base64": "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAArAAAAFkCAIAAABXYZ9F…",
  "warnings": [],
  "themes": [
    "dracula",
    "monokai",
    "one-dark",
    "github-dark",
    "github-light",
    "nord",
    "night-owl",
    "vscode-dark",
    "solarized-light"
  ]
}

Ứng dụng

  • Ảnh đoạn code cho bài blog, slide, mạng xã hội
  • Bot gửi ảnh code lên Slack, Discord, Telegram, Zalo
  • Tài liệu khóa học, bài hướng dẫn với định dạng thống nhất
  • Ảnh minh họa tài liệu được tạo tự động trong CI

Hỏi đáp

Có dùng phông hay giao diện màu riêng được không?

Hiện chưa: ảnh luôn dùng JetBrains Mono và một trong 9 giao diện có sẵn để kết quả giống nhau ở mọi nơi. Bạn đổi được nền bên ngoài và tiêu đề cửa sổ.

Ngôn ngữ được nhận diện thế nào?

Với language=auto, highlight.js chấm điểm đoạn code theo các ngôn ngữ đã nạp và chọn ngôn ngữ khớp nhất; kết quả cho biết ngôn ngữ đã chọn. Đoạn code ngắn nên ghi rõ language.

Vì sao emoji bị thiếu?

Phông nhúng chỉ gồm chữ Latin (có tiếng Việt), Hy Lạp, ký hiệu, khung kẻ và ký hiệu toán. Ký tự thiếu được để trống và có cảnh báo khi dùng format=json.

API liên quan

Bắt đầu với 1.000 request miễn phí mỗi tháng. Nhận API key miễn phí →