Cách dùng Code sang ảnh
- Dán code của bạn — hoặc thử Mẫu. Ngôn ngữ được tự nhận diện, hoặc bạn có thể chọn thủ công.
- Chọn một theme, một nền và kiểu cửa sổ, rồi nhập tên file cho thanh tiêu đề.
- Điều chỉnh khoảng đệm và cỡ chữ; bật số dòng nếu bạn cần tham chiếu đến chúng.
- Tải về PNG (2× rất sắc nét trên màn hình retina và mạng xã hội), SVG cho tài liệu, hoặc Sao chép ảnh rồi dán vào Slack, X hay slide.
Vì sao nên chia sẻ code dưới dạng ảnh?
Trên mạng xã hội và trong slide, code dạng văn bản thường mất định dạng và màu sắc. Ảnh code giữ nguyên thụt lề, màu tô và bố cục đúng như bạn muốn, trông đẹp trong newsfeed và không bị một trình soạn thảo văn bản làm xáo trộn. Với tài liệu mà người đọc cần sao chép, hãy tiếp tục dùng khối code dạng văn bản — và chỉ thêm ảnh như một minh họa.
Cách ảnh được vẽ
Đoạn code được tô màu bởi một bộ phân tích cú pháp (tokenizer) nhỏ tích hợp sẵn — nhận diện chú thích, chuỗi, số, từ khóa, hàm và thuộc tính cho mười ngôn ngữ phổ biến — rồi vẽ lên canvas bằng font monospace của hệ thống. Khi xuất PNG, ảnh được vẽ lại ở 1×, 2× hoặc 3× để luôn sắc nét; khi xuất SVG, chữ vẫn là chữ, nên có thể phóng to tùy ý và vẫn tìm kiếm được. Mọi thao tác đều diễn ra ngay trong trình duyệt của bạn.
Liên quan: JavaScript Formatter, HTML Formatter, CSS Gradient Generator.
Cũng được tìm dưới tên: code to image, tạo ảnh từ code, chụp ảnh code, ảnh chụp màn hình code, code sang png, ảnh code tô màu cú pháp, tạo ảnh code đẹp, chia sẻ code dạng ảnh.
Các công cụ dùng kèm tốt với Code sang ảnh
- Định dạng CSS — Chuyển stylesheet đã nén thành CSS dễ đọc, mỗi thuộc tính một dòng và các khối @media được lồng đúng cấu trúc.
- Định dạng JSON — Dán JSON để định dạng đẹp, nén hoặc kiểm tra.
- Trình soạn thảo Markdown — Viết Markdown với khung xem trước trực tiếp song song, thanh công cụ định dạng và phím tắt.
- Trình Tạo Ảnh OG — Tạo ảnh xem trước liên kết đẹp mắt cho Facebook, LinkedIn, X, Slack và WhatsApp chỉ trong vài giây.