Bỏ qua tới nội dung
Toolars
Khám phá
Báo lỗi

Tiện ích Lập trình · Cục bộ

Chuyển code thành ảnh

Code to Image Converter

Xuất mã tô sáng bằng Shiki — sáu ngôn ngữ, giao diện sáng/tối kiểu GitHub — thành PNG hoặc SVG với số dòng, tiêu đề cửa sổ và tỷ lệ 1x/2x. Xử lý cục bộ.

Lộ trình tác vụ / từ đầu vào đến kết quả

Dán mã của bạn

Chạy cục bộ · Không có gì được tải lên

Cách Chuyển code thành ảnh hoạt động, quyền riêng tư và các công cụ liên quan

Lộ trình tác vụ / từ đầu vào đến kết quả

Cách biến mã nguồn thành hình ảnh để chia sẻ

  1. 01

    Dán mã của bạn

    Gõ hoặc dán vào trường Nguồn mã — tối đa 65.536 byte UTF-8, tối đa 200 dòng và 240 ký tự mỗi dòng. Bộ đếm cạnh nhãn hiển thị số byte hiện tại so với giới hạn, và bất cứ thứ gì vượt ngưỡng đều bị từ chối kèm thông báo nêu rõ ngưỡng đó, để bạn biết chính xác cần cắt gì.

  2. 02

    Chọn ngôn ngữ và giao diện

    Chọn JavaScript, TypeScript, HTML, CSS, JSON hoặc Bash trong Ngôn ngữ, rồi đặt Giao diện thành Sáng hoặc Tối. Màu cú pháp đến từ ngữ pháp Shiki tương ứng và một giao diện kiểu GitHub, và Tải mẫu điền vào trường một ví dụ ngắn bằng ngôn ngữ đã chọn để bạn so sánh các kiểu trước khi dán mã của mình.

  3. 03

    Tạo kiểu cho khung

    Đặt Màu nền, Khoảng đệm từ 16 đến 96 px và Cỡ chữ từ 12 đến 28 px, rồi thêm Tiêu đề cửa sổ tối đa 80 ký tự, bật Hiển thị số dòng, và chọn Tỷ lệ xuất 1x hoặc 2x. Chiều cao dòng tự động đi theo cỡ chữ, nên chữ lớn vẫn dễ đọc mà không cần tinh chỉnh thêm.

  4. 04

    Tạo bản xem trước

    Tạo sẽ nạp bộ tách token cục bộ, đo các đoạn chữ và tiêu đề cửa sổ thực tế, và hiển thị đúng SVG đã escape dùng cho việc xuất. Mã nguồn vẫn là văn bản trơ. Chỉnh sửa sẽ xóa bản xem trước cũ. Đầu ra quá lớn hoặc không đo được sẽ bị từ chối; bản xem trước rộng có thể cuộn bằng bàn phím.

  5. 05

    Tải xuống SVG hoặc PNG

    Dùng Tải xuống SVG cho tệp vector co giãn, hoặc Tải xuống PNG cho một bitmap render qua Canvas ở tỷ lệ đã chọn. Cả hai tệp đều được tạo cục bộ, và nếu tổ hợp đã chọn vượt kích thước xuất an toàn, không gian làm việc sẽ nói rõ thay vì ghi một tệp hỏng.

Thông tin công cụ

Xử lý
Trong trình duyệt của bạn
Dữ liệu nhập rời thiết bị này
Không bao giờ
Lưu giữ
Không có gì được lưu
Giá
Miễn phí

Dữ liệu bạn nhập ở lại trong trình duyệt.

Chuyển code thành ảnh dùng lộ trình thực thi cục bộ đã xác minh và không tạo lịch sử đầu vào hay đầu ra ẩn.

Thực thi cục bộ

Chạy bên trong tab trình duyệt hiện tại.

Không xử lý ẩn

Dữ liệu công cụ đang hoạt động không bao giờ trở thành bản ghi tài liệu của Toolars.

Không cần tài khoản

Dùng quy trình cốt lõi mà không cần tạo hồ sơ. Mục yêu thích đồng bộ vào tài khoản sau khi bạn đăng nhập.

Đặt lại ngay lập tức

Xóa tab và dữ liệu đang làm việc sẽ biến mất.

Khi nào Chuyển code thành ảnh hữu ích

Xuất đoạn mã hai dòng

Dán hai dòng: const total = 2 + 3; và console.log(total); (40 byte UTF-8). Chọn JavaScript, Tối, nền #111827, đệm 64 px, cỡ chữ 16 px, bật số dòng, tiêu đề sum.js và 1×. Trong phép thử trình duyệt cục bộ 2026-09-24, tạo bản xem trước rồi tải PNG cho toolars-code-image.png 406 × 270 pixel, 12.784 byte. Ảnh chỉ hiển thị mã, không chạy mã.

So sánh 1×, 2× và SVG

Giữ mã và cài đặt, chuyển sang 2×, tạo lại rồi tải PNG. Tệp ngày 2026-09-24 có 812 × 540 pixel và 31.366 byte. Ở 1×, SVG tải xuống toolars-code-image.svg có 1.647 byte với viewBox 406 × 270. Tỷ lệ đổi số pixel PNG chứ không đổi mã; kích thước và byte có thể thay đổi theo phông chữ và trình duyệt. SVG không nhúng phông có thể hiển thị khác.

Khôi phục nguồn trống

Xóa Mã nguồn rồi tạo bản xem trước. Không gian làm việc yêu cầu nhập mã và vô hiệu hóa cả hai nút tải xuống. Dán lại hai dòng trên và tạo lại; mỗi lần sửa đều xóa bản xem trước cũ. Nếu bản xuất vượt 4.096 pixel mỗi cạnh, thử 1× hoặc giảm đệm và cỡ chữ.

Chuyển code thành ảnh thực sự làm gì

Một hàm bạn tự hào xứng đáng có mặt trong ghi chú phát hành; một đoạn mã hóc búa cần minh họa wiki nội bộ; một slide hội nghị muốn một đoạn mã được tạo kiểu thay vì ảnh chụp màn hình bị cắt tab. Trình chuyển mã thành hình ảnh biến đoạn mã thành một khung bóng bẩy với số dòng và tiêu đề cửa sổ, và SVG hay PNG xuất ra đi thẳng vào slide, tài liệu và chat mà không cần dọn dẹp thủ công. Vì việc tách token và render diễn ra trong tab này, mã nguồn chưa công bố không bao giờ đi đến đâu.

Câu hỏi thường gặp

Làm sao tạo ảnh JavaScript cho trang trình chiếu?
Nhập const total = 2 + 3;, chọn JavaScript, giao diện sáng và 1x. Tạo bản xem trước rồi tải PNG. Ảnh hiển thị mã, không phải kết quả 5: công cụ không chạy mã. Muốn ảnh lớn hơn, chọn 2x và tạo lại; chiều rộng và chiều cao tăng gấp đôi.
Làm sao xuất ví dụ JSON thành SVG?
Nhập {"ok":true}, chọn JSON và tạo bản xem trước. Tải SVG để có hình mã có thể co giãn hoặc PNG để giữ nguyên diện mạo đã kết xuất. Sau khi sửa văn bản, hãy tạo lại vì bản xem trước cũ bị xóa. Đây là xuất ảnh, không phải kết quả xác thực JSON.
Các giới hạn đầu vào là gì?
Tối đa 65.536 byte UTF-8 mã nguồn, tối đa 200 dòng với không quá 240 ký tự mỗi dòng, và tiêu đề cửa sổ tối đa 80 ký tự. Bản thân việc xuất bị giới hạn ở 4.096 pixel mỗi cạnh và tổng 16.777.216 pixel; bất cứ thứ gì vượt các ngưỡng này đều bị từ chối với thông báo cụ thể.
Mã của tôi có bị tải lên hay thực thi không?
Không có cả hai. Bộ tách token Shiki chỉ nạp bên trong tab này khi bạn nhấn Tạo bản xem trước, bản xem trước được dựng từ các token văn bản chứ không phải HTML chèn vào, và mã nguồn không bao giờ được gửi đi đâu hay lưu lại sau khi bạn dọn không gian làm việc.
Những ngôn ngữ và giao diện nào khả dụng?
Sáu ngôn ngữ — JavaScript, TypeScript, HTML, CSS, JSON và Bash — mỗi ngôn ngữ được tách token bằng ngữ pháp Shiki riêng. Giao diện Sáng và Tối là các bảng màu kiểu GitHub, và điều khiển Màu nền tạo kiểu cho khung quanh thẻ độc lập với giao diện bạn chọn.
Tỷ lệ xuất thay đổi điều gì?
1x dùng kích thước ảnh đã đo. 2x nhân đôi cả chiều rộng lẫn chiều cao, tạo gấp bốn lần số pixel PNG; nó không thêm chi tiết mã hay thay đổi văn bản. Cả hai tỷ lệ đều phải nằm trong giới hạn xuất. Giảm tỷ lệ nếu bản xuất quá lớn.
Tôi nên tải SVG hay PNG?
PNG giữ nguyên các pixel được render tại đây. SVG vẫn co giãn được; khi không có font tải lên, nó dựa vào font hệ thống, vốn có thể khác trên thiết bị khác. Một font tải lên được chấp nhận sẽ được nhúng toàn bộ, nhưng trình xem đích phải hỗ trợ font nhúng. Dùng PNG khi sự đồng nhất về hiển thị quan trọng.
Vì sao bản xem trước biến mất sau khi tôi đổi một cài đặt?
Đó là chủ đích: bất kỳ chỉnh sửa nào về mã, ngôn ngữ, giao diện, nền, khoảng đệm, cỡ chữ, tiêu đề, số dòng hay tỷ lệ đều vô hiệu bản xem trước cũ thay vì hiển thị một hình ảnh cũ. Nhấn Tạo bản xem trước lần nữa để render khung đã cập nhật.
Tôi có thể nhúng những font nào?
TTF/OTF, tối đa 24 MiB. Hãy chọn một font bạn được phép nhúng. Font outline tĩnh với quyền nhúng không hạn chế được hỗ trợ; font biến thiên/font màu bị từ chối. Toàn bộ font được đưa vào SVG. Thiếu glyph sẽ dừng việc tạo. Không tệp nào được tải lên. Không có font, SVG dùng font hệ thống.

Đọc tiếp

Tiếp tục trong Lập trình

Tác vụ liên quan, không phải ngõ cụt.

Chuyển sang một không gian làm việc tập trung khác mà không cần quay lại mục lục đầy đủ.

Trình tạo slug URL

URL Slug Generator

Chuẩn hóa tiêu đề thành slug viết thường: bỏ dấu phụ, & thành and, ký tự lạ gộp thành một dấu gạch ngang hoặc gạch dưới. Giữ chữ cái mọi hệ chữ.

Tạo

Đổ bóng cho React Native

React Native Shadow Generator

Tinh chỉnh shadow iOS và elevation Android đối chiếu xem trước trực tiếp, rồi sao chép đoạn StyleSheet cho iOS, Android hoặc cả hai, kể cả chế độ boxShadow mới.

Tạo

Mã hóa/giải mã Base64

Base64 Encoder/Decoder

Mã hóa và giải mã Base64 với thẩm định trực tiếp, tùy chọn UTF-8, an toàn URL và giữ ngắt dòng. Nút Đảo giúp kiểm tra khứ hồi trong hai cú nhấp.

Chuyển đổi

Mã hóa/giải mã HTML

HTML Encoder/Decoder

Escape đúng năm ký tự phá markup — &, <, >, ngoặc kép và nháy đơn — hoặc giải mã mọi entity tên và số qua trình phân tích của trình duyệt. Chạy cục bộ.

Chuyển đổi