Chuyển đổi mã thành hình ảnh
Chuyển đổi toàn bộ mã trong bài viết thành hình ảnh và tải xuống chỉ với một cú nhấp chuột.
Why we love this skill
Kỹ năng này chuyển đổi mã nguồn thành hình ảnh được tô sáng đẹp mắt, mô phỏng giao diện terminal và hỗ trợ tải xuống độ phân giải cao, biến nó thành công cụ lý tưởng cho các nhà phát triển để chia sẻ các đoạn mã.
Hướng dẫn
Là một lập trình viên front-end cấp cao, bạn cần chuyển đổi tất cả các đoạn mã trong nội dung thành hình ảnh được tô sáng. Việc trích xuất tất cả các đoạn mã là rất quan trọng! Lưu ý rằng mã được bao bọc nghiêm ngặt trong cú pháp dấu ngoặc kép ngược (``) của Markdown nên được coi là một đoạn mã duy nhất. Hãy đặc biệt chú ý đến mã JSX. Hãy coi cú pháp JS như cú pháp JSX để tô sáng.
Phối màu: Màu xám đậm được sử dụng làm màu nền chính, và các khối mã sử dụng nền tối với các phần mã được tô màu nổi bật (màu lục lam và xanh lá cây tươi sáng là những màu nhấn mạnh chính).
Bố cục: Các khối mã mô phỏng giao diện của một trình soạn thảo mã/terminal, nhưng các nút ở phía trên trình soạn thảo mã đã được loại bỏ, chỉ hiển thị mã. Mỗi thẻ có khoảng đệm trên và dưới là 15px và khoảng đệm trái và phải là 25px.
Triển khai kỹ thuật: Bố cục và kiểu dáng được thực hiện bằng HTML5 và CSS (các khối mã cần được tô màu nổi bật); chức năng dom-to-image-more đã được tích hợp. Địa chỉ của script dom-to-image-more là https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js, cho phép tải xuống hình ảnh từng thẻ một (nút nằm bên dưới thẻ, hình ảnh phải có độ phân giải cao) và tải xuống tất cả hình ảnh chỉ với một cú nhấp chuột (sau khi nhấp chuột, đợi 1 giây trước khi tải xuống từng hình ảnh một). Tránh thêm các dấu ngoặc kép ngược (`\`) không cần thiết vào mã, vì điều này có thể gây ra lỗi.
Khi thực hiện việc này, vui lòng lưu ý: Giữ cho bìa thiệp đơn giản. Không sử dụng các phần tử giả (pseudo-elements) cho biểu tượng; hãy sử dụng SVG trực tiếp. Hình ảnh tải xuống nên có độ phân giải cao, với tỷ lệ 2. Đặt tên hình ảnh theo thứ tự số.
Related Skills
View allBản đồ thông tin kiểu mã Claude
Tạo poster infographic độ phân giải cao 4K với 'nền chuyển màu be nhạt + điểm nhấn màu đỏ đất nung + tiêu đề chữ serif độ tương phản cao + bố cục dạng lưới' theo phong cách tối giản học thuật, hoàn hảo cho việc tổng hợp kiến thức, dàn ý bài giảng, hướng dẫn kỹ thuật và trực quan hóa nội dung mật độ cao.
Minh họa mang tính kể chuyện về nghề thủ công
Cuối cùng, ngay cả những quy trình phức tạp cũng có thể được hiểu rõ ràng. Các infographic tinh tế thể hiện hoàn hảo những chi tiết tỉ mỉ, kể câu chuyện thương hiệu một cách sống động.
Hình nền theo phong cách YouMind
Tạo một hình ảnh trừu tượng theo phong cách thương hiệu YouMind để sử dụng làm hình nền. Hướng dẫn về phông chữ: Sử dụng<Libre Baskerville> đối với các tựa đề tiếng Anh và<Source Sans> Đối với các tựa sách tiếng Trung.
Chuyển đổi mã thành hình ảnh
Chuyển đổi toàn bộ mã trong bài viết thành hình ảnh và tải xuống chỉ với một cú nhấp chuột.
Why we love this skill
Kỹ năng này chuyển đổi mã nguồn thành hình ảnh được tô sáng đẹp mắt, mô phỏng giao diện terminal và hỗ trợ tải xuống độ phân giải cao, biến nó thành công cụ lý tưởng cho các nhà phát triển để chia sẻ các đoạn mã.
Hướng dẫn
Là một lập trình viên front-end cấp cao, bạn cần chuyển đổi tất cả các đoạn mã trong nội dung thành hình ảnh được tô sáng. Việc trích xuất tất cả các đoạn mã là rất quan trọng! Lưu ý rằng mã được bao bọc nghiêm ngặt trong cú pháp dấu ngoặc kép ngược (``) của Markdown nên được coi là một đoạn mã duy nhất. Hãy đặc biệt chú ý đến mã JSX. Hãy coi cú pháp JS như cú pháp JSX để tô sáng.
Phối màu: Màu xám đậm được sử dụng làm màu nền chính, và các khối mã sử dụng nền tối với các phần mã được tô màu nổi bật (màu lục lam và xanh lá cây tươi sáng là những màu nhấn mạnh chính).
Bố cục: Các khối mã mô phỏng giao diện của một trình soạn thảo mã/terminal, nhưng các nút ở phía trên trình soạn thảo mã đã được loại bỏ, chỉ hiển thị mã. Mỗi thẻ có khoảng đệm trên và dưới là 15px và khoảng đệm trái và phải là 25px.
Triển khai kỹ thuật: Bố cục và kiểu dáng được thực hiện bằng HTML5 và CSS (các khối mã cần được tô màu nổi bật); chức năng dom-to-image-more đã được tích hợp. Địa chỉ của script dom-to-image-more là https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js, cho phép tải xuống hình ảnh từng thẻ một (nút nằm bên dưới thẻ, hình ảnh phải có độ phân giải cao) và tải xuống tất cả hình ảnh chỉ với một cú nhấp chuột (sau khi nhấp chuột, đợi 1 giây trước khi tải xuống từng hình ảnh một). Tránh thêm các dấu ngoặc kép ngược (`\`) không cần thiết vào mã, vì điều này có thể gây ra lỗi.
Khi thực hiện việc này, vui lòng lưu ý: Giữ cho bìa thiệp đơn giản. Không sử dụng các phần tử giả (pseudo-elements) cho biểu tượng; hãy sử dụng SVG trực tiếp. Hình ảnh tải xuống nên có độ phân giải cao, với tỷ lệ 2. Đặt tên hình ảnh theo thứ tự số.
Related Skills
View allBản đồ thông tin kiểu mã Claude
Tạo poster infographic độ phân giải cao 4K với 'nền chuyển màu be nhạt + điểm nhấn màu đỏ đất nung + tiêu đề chữ serif độ tương phản cao + bố cục dạng lưới' theo phong cách tối giản học thuật, hoàn hảo cho việc tổng hợp kiến thức, dàn ý bài giảng, hướng dẫn kỹ thuật và trực quan hóa nội dung mật độ cao.
Minh họa mang tính kể chuyện về nghề thủ công
Cuối cùng, ngay cả những quy trình phức tạp cũng có thể được hiểu rõ ràng. Các infographic tinh tế thể hiện hoàn hảo những chi tiết tỉ mỉ, kể câu chuyện thương hiệu một cách sống động.
Hình nền theo phong cách YouMind
Tạo một hình ảnh trừu tượng theo phong cách thương hiệu YouMind để sử dụng làm hình nền. Hướng dẫn về phông chữ: Sử dụng<Libre Baskerville> đối với các tựa đề tiếng Anh và<Source Sans> Đối với các tựa sách tiếng Trung.
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
