Chụp ảnh code đẹp để chia sẻ lên mạng xã hội, slide và tài liệu
Công cụ chụp ảnh code đẹp biến đoạn mã bạn dán vào thành một bức ảnh gọn gàng: có tô màu cú pháp, khung cửa sổ kiểu macOS hoặc Windows, số dòng, nền chuyển màu và bóng đổ. Ảnh được vẽ bằng canvas ngay trong trình duyệt ở độ phân giải 2x hoặc 3x nên sắc nét trên màn hình Retina, tải về dạng PNG hoặc sao chép thẳng vào clipboard, chú thích tiếng Việt có dấu hiển thị đầy đủ.
Tính năng nổi bật
- Tô màu cú pháp cho JavaScript, TypeScript, Python, HTML, CSS, SCSS, JSON, SQL, Bash, Java, C#, PHP, Go và chế độ văn bản thường
- 7 giao diện màu: One Dark, Dracula, Monokai, Nord, Night Owl (tối) và GitHub, Solarized (sáng)
- Khung cửa sổ macOS có ba nút màu, khung Windows hoặc không khung, kèm tên tệp trên thanh tiêu đề
- Nền chuyển màu với 7 mẫu, nền một màu tự chọn hoặc nền trong suốt giữ kênh alpha trong PNG
- Tùy chỉnh lề ngoài, cỡ chữ, số dòng và dòng bắt đầu, bóng đổ, độ rộng tab
- Dòng dài giữ nguyên với ảnh tự nới rộng, hoặc ngắt dòng theo số cột bạn chọn
- Xuất PNG 1x, 2x, 3x và sao chép ảnh vào clipboard để dán thẳng vào Zalo, Slack, Word
- Phông IBM Plex Mono có đủ dấu tiếng Việt, chú thích tiếng Việt không bị lỗi font
Vì sao nên chia sẻ code bằng ảnh đẹp thay vì chụp màn hình
Chụp màn hình trình soạn thảo thường dính cả thanh bên, tab, gạch chân lỗi chính tả và chữ quá nhỏ khi xem trên điện thoại. Dán code dạng chữ vào Facebook, LinkedIn hay Zalo thì mất thụt lề và mất màu. Một bức ảnh code được căn lề gọn, có màu cú pháp và khung cửa sổ giúp bài viết kỹ thuật, slide thuyết trình, tài liệu hướng dẫn hay bài giảng lập trình trông chuyên nghiệp và dễ đọc hơn hẳn. Công cụ làm việc đó trong vài giây, chạy hoàn toàn trên trình duyệt nên đoạn code của bạn, kể cả mã nội bộ công ty, không bị tải lên bất kỳ máy chủ nào.
Lợi ích khi sử dụng
- Bài viết kỹ thuật, slide, giáo trình có hình minh họa code rõ ràng, thống nhất phong cách
- Ảnh sắc nét trên màn hình độ phân giải cao nhờ xuất 2x, 3x
- Không cần cài tiện ích mở rộng hay đăng nhập tài khoản
- Code không rời khỏi máy, an toàn cho mã nguồn nội bộ
- Chú thích và chuỗi tiếng Việt hiển thị đúng dấu
Cách chụp ảnh code đẹp online
- 1Chọn ngôn ngữ lập trình để công cụ tô màu đúng từ khóa, chuỗi, chú thích và số.
- 2Dán đoạn code vào ô Đoạn code; nên chọn đoạn ngắn, tập trung vào ý chính để ảnh dễ đọc trên điện thoại.
- 3Chọn giao diện màu, kiểu khung cửa sổ, nhập tên tệp hiển thị trên thanh tiêu đề nếu muốn.
- 4Chọn nền chuyển màu, một màu hoặc trong suốt, chỉnh lề ngoài, cỡ chữ, bật hoặc tắt số dòng và bóng đổ.
- 5Nếu có dòng quá dài, bật Ngắt dòng dài và chọn số cột tối đa để ảnh không bị quá rộng.
- 6Chọn độ phân giải 2x hoặc 3x rồi bấm Tải PNG, hoặc bấm Sao chép ảnh để dán thẳng vào ứng dụng khác.
Mẹo để ảnh code dễ đọc trên mạng xã hội
Ảnh trên Facebook, LinkedIn thường được xem trên điện thoại với bề ngang khoảng 400 điểm ảnh, nên đoạn code nên ngắn, khoảng 10 đến 25 dòng và mỗi dòng không quá 60 đến 80 ký tự. Hãy bỏ các dòng import, log không liên quan, giữ lại đúng phần minh họa ý bạn muốn nói. Cỡ chữ 14 đến 16 kết hợp xuất 2x là đủ nét cho hầu hết trường hợp; nếu ảnh dùng cho slide chiếu trên màn hình lớn, hãy tăng cỡ chữ thay vì chỉ tăng độ phân giải. Giao diện tối nổi bật trên bảng tin, giao diện sáng hợp với tài liệu in và slide nền trắng. Đặt tên tệp trên thanh tiêu đề giúp người xem biết ngay đây là đoạn code gì.
Bộ tô màu cú pháp hoạt động thế nào
Công cụ dùng một bộ tô màu gọn nhẹ viết riêng, đọc đoạn code thành các mảnh như từ khóa, chuỗi, chú thích, số, tên hàm, tên kiểu, thuộc tính rồi tô màu theo giao diện đã chọn. Với HTML, bộ đọc nhận ra thẻ, thuộc tính, giá trị và tô màu cả đoạn JavaScript trong thẻ script, CSS trong thẻ style. Với CSS, nó phân biệt bộ chọn, tên thuộc tính và giá trị, kể cả điều kiện trong @media. Với JSON, tên khóa và giá trị chuỗi được tô khác nhau. Đây không phải trình phân tích cú pháp đầy đủ như VS Code nên một số trường hợp đặc biệt như biểu thức lồng trong template string, biểu thức chính quy, heredoc của Bash có thể tô chưa hoàn toàn chính xác. Nội dung code thì luôn được giữ nguyên từng ký tự.
Xử lý dòng code dài
Mặc định công cụ giữ nguyên từng dòng như trong trình soạn thảo và nới rộng ảnh theo dòng dài nhất, giống cách code hiển thị thật. Khi có dòng rất dài, ảnh sẽ quá rộng và chữ bị nhỏ khi thu vào màn hình điện thoại, lúc đó hãy bật Ngắt dòng dài và chọn số cột tối đa, ví dụ 60 hoặc 80. Phần bị ngắt xuống dòng dưới không có số dòng riêng, nên người xem vẫn nhận ra đó là cùng một dòng code. Ký tự tab được đổi thành 2, 4 hoặc 8 dấu cách theo lựa chọn để thụt lề hiển thị đều nhau.
Chú thích tiếng Việt và phông chữ
Nhiều công cụ tạo ảnh code dùng phông chữ không có đủ ký tự tiếng Việt, khiến chữ có dấu bị thay bằng phông khác hoặc dấu bị lệch. Công cụ này tải phông IBM Plex Mono từ chính website, phông đã có đủ các ký tự như ệ, ữ, ở, đ, Đ, và vẽ trực tiếp lên canvas. Chữ có dấu ở dạng tổ hợp (thường gặp khi sao chép từ tệp tạo trên macOS) được chuẩn hóa về dạng dựng sẵn trước khi vẽ để dấu không bị tách rời. Nếu phông không tải được do mạng chậm, công cụ tự dùng phông monospace của máy và báo cho bạn biết.
Độ phân giải, nền trong suốt và sao chép vào clipboard
Ảnh xuất ở 2x nghĩa là mỗi điểm ảnh hiển thị được vẽ bằng bốn điểm ảnh thật, giúp chữ sắc nét trên màn hình Retina, điện thoại và khi phóng to. Ảnh 3x phù hợp để in hoặc chèn vào slide chiếu màn hình lớn. Trình duyệt giới hạn kích thước canvas, Safari trên iPhone chỉ cho khoảng 16 triệu điểm ảnh, nên với đoạn code rất dài công cụ tự hạ độ phân giải xuất và báo rõ để ảnh không bị trắng. Nền trong suốt giữ kênh alpha trong tệp PNG, hợp để đặt lên slide có sẵn màu nền. Nút Sao chép ảnh dùng Clipboard API, chạy trên Chrome, Edge, Safari và Firefox bản mới; nếu trình duyệt không cho phép, hãy dùng nút Tải PNG.
Giới hạn của công cụ
Công cụ nhận tối đa 1.000 dòng hoặc 100.000 ký tự mỗi lần vì ảnh quá dài vừa khó đọc vừa vượt giới hạn canvas của trình duyệt. Bộ tô màu là loại gọn nhẹ, không hiểu ngữ nghĩa, nên không đánh dấu lỗi, không tô màu biến theo phạm vi như các trình soạn thảo lớn. Các ngôn ngữ ngoài danh sách có thể dùng chế độ văn bản thường. Emoji và chữ Trung, Nhật, Hàn phụ thuộc phông của máy nên có thể rộng hơn một ô chữ và làm lệch cột. Khung xem trước có thể hơi khác ảnh xuất ở độ nét, nhưng bố cục là một.
Câu hỏi thường gặp (FAQ)
Chụp ảnh code đẹp bằng công cụ này có mất phí không?
Không. Công cụ miễn phí, không cần đăng ký, không chèn logo hay watermark vào ảnh.
Đoạn code của tôi có bị gửi lên máy chủ không?
Không. Việc tô màu và vẽ ảnh diễn ra hoàn toàn trong trình duyệt bằng canvas. Trang chỉ tải về phông chữ IBM Plex Mono từ chính website, không tải code của bạn đi đâu.
Công cụ hỗ trợ những ngôn ngữ lập trình nào?
JavaScript, TypeScript, Python, HTML, CSS, SCSS, JSON, SQL, Bash, Java, C#, PHP và Go. Ngôn ngữ khác có thể dùng chế độ văn bản thường, ảnh vẫn đẹp nhưng không tô màu cú pháp.
Vì sao một số chỗ tô màu chưa giống VS Code?
Bộ tô màu của công cụ là loại gọn nhẹ dựa trên nhận diện từ khóa, chuỗi, chú thích và số, không phân tích cú pháp đầy đủ. Các trường hợp như biểu thức trong template string, regex hay heredoc có thể tô đơn giản hơn trình soạn thảo.
Ảnh 2x và 3x khác nhau thế nào, nên chọn loại nào?
2x có số điểm ảnh gấp đôi mỗi chiều so với kích thước hiển thị, đủ nét cho mạng xã hội và màn hình Retina. 3x lớn hơn, hợp để in hoặc chiếu màn hình lớn. Tệp 3x nặng hơn nên chỉ chọn khi cần.
Sao chép ảnh vào clipboard không được thì làm sao?
Một số trình duyệt cũ hoặc chế độ riêng tư chặn ghi ảnh vào clipboard. Khi đó hãy dùng nút Tải PNG rồi đính kèm tệp. Trên điện thoại, tải ảnh về rồi chia sẻ từ thư viện ảnh.
Chú thích tiếng Việt có bị lỗi font không?
Không, công cụ dùng phông IBM Plex Mono có đủ ký tự tiếng Việt và chuẩn hóa chữ có dấu về dạng dựng sẵn trước khi vẽ. Nếu phông chưa tải xong, công cụ tạm dùng phông monospace của máy.
Code có dòng rất dài thì ảnh bị tràn ra sao?
Ảnh không bị cắt mà tự nới rộng theo dòng dài nhất. Nếu ảnh quá rộng, bật Ngắt dòng dài và chọn số cột tối đa để công cụ tự xuống dòng phần thừa.
Có tạo ảnh nền trong suốt được không?
Có. Chọn nền Trong suốt, ảnh PNG sẽ chỉ có khung cửa sổ code, phần xung quanh trong suốt để đặt lên slide hoặc thiết kế có sẵn nền.
Có ẩn số dòng hoặc bắt đầu từ dòng khác được không?
Có. Bỏ chọn Số dòng để ẩn, hoặc nhập Bắt đầu từ dòng để số dòng khớp với vị trí thật của đoạn code trong tệp gốc.
Công cụ này khác gì Carbon hay ray.so?
Cùng mục đích tạo ảnh code đẹp. Điểm khác là giao diện tiếng Việt, phông có sẵn đủ dấu tiếng Việt, chạy hoàn toàn trên trình duyệt không cần tài khoản và có tùy chọn ngắt dòng theo số cột.
Giới hạn độ dài đoạn code là bao nhiêu?
Tối đa 1.000 dòng hoặc 100.000 ký tự. Với ảnh rất dài, công cụ có thể tự hạ độ phân giải xuất để không vượt giới hạn canvas của trình duyệt và sẽ báo cho bạn biết.
Muốn lưu đoạn code để dùng lại sau thì làm thế nào?
Hãy dùng Code Snippet Manager của Tấn Phát Digital để lưu, gắn thẻ và tìm lại các đoạn code thường dùng.
Từ khóa liên quan
- chụp ảnh code đẹp
- tạo ảnh code online
- code to image
- code screenshot
- carbon code image
- ảnh code đẹp
- chụp màn hình code đẹp
- tạo hình ảnh đoạn code
- code snippet image
- beautiful code screenshot
- chia sẻ code lên facebook
- ảnh code cho slide
- tô màu cú pháp online
- syntax highlight image
- code image generator
- xuất code ra ảnh png
- ray.so alternative
- chụp code macos window
