Mã thành ảnh

Biến một đoạn mã thành hình ảnh có tô sáng cú pháp ngay trong trình duyệt, với hơn 20 ngôn ngữ, chủ đề và nền tùy chỉnh, số dòng, cùng xuất PNG hoặc SVG.

Đang tải công cụ…

Mã thành ảnhDán một đoạn mã, chọn ngôn ngữ (hoặc để tự động phát hiện đoán giúp) và tạo kiểu cho thẻ mã kiểu Carbon với một chủ đề; nền chuyển sắc, đặc, tùy chỉnh hoặc trong suốt; phông chữ đơn cách có thể điều chỉnh; số dòng và tiêu đề cửa sổ có thể chỉnh sửa. Xuất nó thành PNG ở tỷ lệ 1x–3x hoặc thành SVG, hoặc sao chép hình ảnh thẳng vào bảng nhớ tạm. Việc tô sáng cú pháp (Prism) và chụp ảnh (html-to-image) đều chạy hoàn toàn trong trình duyệt của bạn, nên mã của bạn không bao giờ được tải lên.

Mã thành ảnh là gì?

Mã thành ảnh là một công cụ miễn phí chạy trên trình duyệt, biến một đoạn mã thành hình ảnh có thể chia sẻ — một thẻ mã được tạo kiểu với tô sáng cú pháp cho bài blog, bộ slide, README hoặc bài đăng mạng xã hội. Nó tô sáng hơn 20 ngôn ngữ, bao gồm JavaScript, TypeScript, Python, Go, Rust, Java, SQL và nhiều hơn nữa, với tính năng tự động phát hiện tùy chọn để đoán ngôn ngữ từ mã của bạn. Trang trí thẻ bằng một trong bảy chủ đề, một nền chuyển sắc dựng sẵn, một màu hoặc nền chuyển sắc tùy chỉnh, hoặc một nền trong suốt, rồi tinh chỉnh phông chữ đơn cách, cỡ chữ, phần đệm, số dòng, tiêu đề cửa sổ và chiều rộng đầu ra. Thẻ được kết xuất trực tiếp khi bạn chỉnh sửa, và bạn có thể xuất nó thành PNG ở 1x, 2x hoặc 3x, lưu thành SVG, hoặc sao chép vào bảng nhớ tạm.

Cách sử dụng Mã thành ảnh

  1. Dán hoặc gõ mã của bạn, hoặc kết nối đầu ra văn bản của một công cụ khác tới cổng đầu vào trong không gian làm việc.
  2. Chọn ngôn ngữ tương ứng, hoặc bật Tự động phát hiện trong Cài đặt để công cụ đoán nó từ mã của bạn.
  3. Chọn một chủ đề và một nền — nền chuyển sắc dựng sẵn, màu đặc hoặc nền chuyển sắc tùy chỉnh, hoặc trong suốt — trong Cài đặt.
  4. Tinh chỉnh theo ý thích phông chữ đơn cách, cỡ chữ, phần đệm, số dòng, tiêu đề cửa sổ và chiều rộng đầu ra.
  5. Xem bản xem trước trực tiếp cập nhật khi bạn chỉnh sửa; nhấp vào nó để phóng to trong chế độ xem thu phóng.
  6. Xuất thẻ thành PNG ở 1x–3x, tải xuống dưới dạng SVG, hoặc sao chép hình ảnh vào bảng nhớ tạm.

Ví dụ

Một đoạn Go có số dòng

Dán một hàm Go, bật Tự động phát hiện để ngôn ngữ được chọn giúp bạn, bật số dòng, chọn chủ đề Nord và xuất một PNG 2x cho hướng dẫn.

Một thẻ thương hiệu với nền chuyển sắc tùy chỉnh

Đặt nền thành Nền chuyển sắc tùy chỉnh, chọn hai màu thương hiệu của bạn và một góc, thêm tiêu đề cửa sổ như app.tsx, rồi sao chép hình ảnh thẳng vào bảng nhớ tạm.

Một SVG co giãn cho tài liệu

Chọn chủ đề sáng Snow, đặt chiều rộng đầu ra và tải xuống một SVG để thẻ mã luôn sắc nét ở mọi kích thước trong tài liệu của bạn.

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

Nó có thể tô sáng những ngôn ngữ nào?
Hơn 20, gồm JavaScript, TypeScript, JSX/TSX, HTML, CSS, JSON, Python, Bash, Java, C, C++, C#, Go, Rust, Ruby, PHP, SQL, YAML, Markdown, Kotlin, Swift và GraphQL. Chọn một từ menu hoặc bật Tự động phát hiện để đoán ngôn ngữ từ mã của bạn.
Tôi có thể xuất gì, và ở chất lượng nào?
Xuất một PNG ở mật độ điểm ảnh 1x, 2x hoặc 3x, lưu một SVG vector, hoặc sao chép hình ảnh thẳng vào bảng nhớ tạm. Chọn nền Trong suốt sẽ giữ cho PNG có kênh alpha mà không có bất kỳ nền nào phía sau thẻ.
Tôi có thể thay đổi giao diện của thẻ không?
Có. Chuyển giữa bảy chủ đề, chọn một nền chuyển sắc dựng sẵn, một màu đặc hoặc nền chuyển sắc tùy chỉnh, hoặc một nền trong suốt, và điều chỉnh phông chữ đơn cách, cỡ chữ, phần đệm, số dòng, tiêu đề cửa sổ có thể chỉnh sửa và chiều rộng đầu ra.
Mã của tôi có được tải lên đâu đó không?
Không. Cả việc tô sáng cú pháp (Prism) lẫn chụp ảnh (html-to-image) đều chạy 100% phía máy khách, trong trình duyệt của bạn. Mã của bạn không bao giờ được tải lên, gửi tới máy chủ của chúng tôi hay chia sẻ, nên ngay cả những đoạn mã độc quyền cũng ở lại trên thiết bị của bạn.
Tại sao ảnh không xuất hiện cho đến khi tôi nhấp Tải về trên trang công cụ?
Trên trang độc lập, PNG được tạo khi bạn nhấn Tải về, Sao chép hình ảnh hoặc Tải SVG, nên việc gõ không chụp lại ảnh sau mỗi lần nhấn phím. Bản xem trước có tạo kiểu vẫn cập nhật trực tiếp; trong không gian làm việc, PNG được dựng lại tự động để có thể chảy tới công cụ tiếp theo.

Công cụ liên quan