Chuyển mã sang ảnh
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://youmind.club/__ext/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ố.
Mô tả
Vì sao chúng tôi đề xuất kỹ năng này
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 HD, là công cụ lý tưởng để lập trình viên chia sẻ đoạn mã.
Chuyển đổi tất cả mã trong bài viết thành hình ảnh và tải xuống chỉ với một cú nhấp
Kỹ năng liên quan
Xem tất cả
Hình ảnh小小东 x In lưới x Bản in x P086
Panel 086 chỉ giữ lại 3–5 thông tin thị giác quyết định để hình ảnh tạo được ấn tượng rõ ràng. Chủ thể được tái tạo bằng silhouette, hình học và các mảng màu đơn giản, sau đó hình thành bản in lưới theo phong cách hiện đại chủ nghĩa trung cổ với 2–4 màu spot lấy từ ảnh, cùng dry-brush, brayer texture, dragged ink, broken ink và uneven coverage. Bố cục luôn hướng đến một tiêu điểm rõ ràng, một hướng chính và một khoảng trống có chủ đích. Phù hợp với những trường hợp sau Muốn ảnh có trật tự thị giác hơn: Chỉ giữ lại 3–5 thông tin thị giác then chốt, dùng silhouette, hình học và các mảng màu để tạo tiêu điểm rõ ràng. Muốn có cảm giác bản in chân thực: Để dry-brush, mực lăn, kéo mực ngang, mực khuyết, mực đứt và độ phủ không đều trở thành ngôn ngữ của hình ảnh. Muốn màu sắc nổi bật nhưng tiết chế: Cô đọng những mối quan hệ giàu sức sống nhất trong ảnh gốc thành 2–4 màu spot, đồng thời để nền giấy và khoảng trống thực sự tham gia vào bố cục. Cần đầu ra linh hoạt: Hỗ trợ bố cục dọc, ngang, thiết kế thuần túy, nhiều tỷ lệ và hình nền bốn cạnh, đồng thời có thể xử lý hàng loạt một thư mục hình ảnh.
Hình ảnhTiểu Tiểu Đông: Nét-Chấm P084
Panel 084 dùng các đường mảnh màu đen hoặc tối để chắt lọc chủ thể, kiến trúc, đường sá và mối quan hệ không gian; dùng đường dọc, đường ngang, đường gấp khúc, đường cong và đường dẫn phối cảnh để tạo khung xương hình học; sau đó dùng sự thay đổi về mật độ của stippling／dotted texture để tạo các lớp không gian cho bầu trời, mặt đất, cảnh xa, bóng cây, ánh đèn và lớp không khí quanh chủ thể. Phông nền phức tạp được chủ động giản lược, giữ lại tiêu điểm rõ ràng, những khoảng trống lớn và một lượng nhỏ màu nhấn có nguồn gốc rõ ràng. Phù hợp với những trường hợp sau Cần làm rõ đô thị, kiến trúc và mối quan hệ không gian: Dùng các đường hình học mảnh, đường dẫn phối cảnh và đường viền then chốt để chắt lọc cấu trúc đường sá, tòa nhà và cảnh vật. Muốn thể hiện không khí, ánh sáng và chiều sâu mà không phủ kín bằng họa tiết: Tạo các lớp không gian tĩnh lặng bằng chuyển sắc mật độ của stippling／dotted texture. Yêu thích bảng màu giới hạn, tiết chế: Lấy xanh xám, trắng ngà và trắng ấm làm chủ đạo, chỉ dùng một lượng nhỏ spot color từ ảnh gốc để làm sáng tiêu điểm. Cần đầu ra linh hoạt: Hỗ trợ bố cục trên-dưới, trái-phải, thiết kế thuần túy, nhiều tỷ lệ và hình nền bốn phía; đồng thời có thể xử lý hàng loạt thư mục ảnh.
Hình ảnh小小东 x Doodle ngây ngô x P083
Panel 083 trước tiên đánh giá lại bức ảnh, chỉ giữ một chủ thể đáng nhớ nhất và tối đa một hoặc hai gợi ý môi trường cần thiết, sau đó có chủ ý làm lệch, làm vụng hoặc hơi phi lý một tỷ lệ, động tác, biểu cảm hay cấu trúc. Đường viền run rẩy, tỷ lệ cố tình sai lệch, nét sáp thô và khoảng trắng kết hợp tạo nên phong cách Ugly-cute naïve doodle; danh tính chủ thể phải được nhận ra chính xác, còn sự hài hước phải đến từ ảnh gốc thay vì tùy tiện thêm trò đùa. Phù hợp trong những trường hợp này Bức ảnh có một khoảnh khắc thể hiện rõ cá tính: Tìm sự hài hước từ động tác, biểu cảm, tỷ lệ hoặc sự tương phản, thay vì máy móc chuyển thành tranh nét. Muốn có vẻ xấu dễ thương nhưng không rẻ tiền: Cố tình vẽ lệch, vẽ vụng và hơi phi lý, đồng thời đảm bảo chủ thể vẫn được nhận ra ngay. Muốn biến cảnh phức tạp thành hình ảnh ít chi tiết nhưng chính xác: Chỉ giữ một chủ thể và tối đa một hoặc hai gợi ý môi trường, dùng màu tô thô cùng những mảng trắng lớn để nhấn mạnh điểm đáng nhớ. Cần đầu ra linh hoạt: Hỗ trợ bố cục dọc, ngang, thiết kế thuần túy, nhiều tỷ lệ và hình nền cho bốn loại thiết bị, đồng thời có thể xử lý hàng loạt một thư mục hình ảnh.
Chuyển mã sang ảnh
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://youmind.club/__ext/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ố.
Mô tả
Vì sao chúng tôi đề xuất kỹ năng này
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 HD, là công cụ lý tưởng để lập trình viên chia sẻ đoạn mã.
Chuyển đổi tất cả mã trong bài viết thành hình ảnh và tải xuống chỉ với một cú nhấp
Kỹ năng liên quan
Xem tất cảHình ảnh小小东 x In lưới x Bản in x P086
Panel 086 chỉ giữ lại 3–5 thông tin thị giác quyết định để hình ảnh tạo được ấn tượng rõ ràng. Chủ thể được tái tạo bằng silhouette, hình học và các mảng màu đơn giản, sau đó hình thành bản in lưới theo phong cách hiện đại chủ nghĩa trung cổ với 2–4 màu spot lấy từ ảnh, cùng dry-brush, brayer texture, dragged ink, broken ink và uneven coverage. Bố cục luôn hướng đến một tiêu điểm rõ ràng, một hướng chính và một khoảng trống có chủ đích. Phù hợp với những trường hợp sau Muốn ảnh có trật tự thị giác hơn: Chỉ giữ lại 3–5 thông tin thị giác then chốt, dùng silhouette, hình học và các mảng màu để tạo tiêu điểm rõ ràng. Muốn có cảm giác bản in chân thực: Để dry-brush, mực lăn, kéo mực ngang, mực khuyết, mực đứt và độ phủ không đều trở thành ngôn ngữ của hình ảnh. Muốn màu sắc nổi bật nhưng tiết chế: Cô đọng những mối quan hệ giàu sức sống nhất trong ảnh gốc thành 2–4 màu spot, đồng thời để nền giấy và khoảng trống thực sự tham gia vào bố cục. Cần đầu ra linh hoạt: Hỗ trợ bố cục dọc, ngang, thiết kế thuần túy, nhiều tỷ lệ và hình nền bốn cạnh, đồng thời có thể xử lý hàng loạt một thư mục hình ảnh.
Hình ảnhTiểu Tiểu Đông: Nét-Chấm P084
Panel 084 dùng các đường mảnh màu đen hoặc tối để chắt lọc chủ thể, kiến trúc, đường sá và mối quan hệ không gian; dùng đường dọc, đường ngang, đường gấp khúc, đường cong và đường dẫn phối cảnh để tạo khung xương hình học; sau đó dùng sự thay đổi về mật độ của stippling／dotted texture để tạo các lớp không gian cho bầu trời, mặt đất, cảnh xa, bóng cây, ánh đèn và lớp không khí quanh chủ thể. Phông nền phức tạp được chủ động giản lược, giữ lại tiêu điểm rõ ràng, những khoảng trống lớn và một lượng nhỏ màu nhấn có nguồn gốc rõ ràng. Phù hợp với những trường hợp sau Cần làm rõ đô thị, kiến trúc và mối quan hệ không gian: Dùng các đường hình học mảnh, đường dẫn phối cảnh và đường viền then chốt để chắt lọc cấu trúc đường sá, tòa nhà và cảnh vật. Muốn thể hiện không khí, ánh sáng và chiều sâu mà không phủ kín bằng họa tiết: Tạo các lớp không gian tĩnh lặng bằng chuyển sắc mật độ của stippling／dotted texture. Yêu thích bảng màu giới hạn, tiết chế: Lấy xanh xám, trắng ngà và trắng ấm làm chủ đạo, chỉ dùng một lượng nhỏ spot color từ ảnh gốc để làm sáng tiêu điểm. Cần đầu ra linh hoạt: Hỗ trợ bố cục trên-dưới, trái-phải, thiết kế thuần túy, nhiều tỷ lệ và hình nền bốn phía; đồng thời có thể xử lý hàng loạt thư mục ảnh.
Hình ảnh小小东 x Doodle ngây ngô x P083
Panel 083 trước tiên đánh giá lại bức ảnh, chỉ giữ một chủ thể đáng nhớ nhất và tối đa một hoặc hai gợi ý môi trường cần thiết, sau đó có chủ ý làm lệch, làm vụng hoặc hơi phi lý một tỷ lệ, động tác, biểu cảm hay cấu trúc. Đường viền run rẩy, tỷ lệ cố tình sai lệch, nét sáp thô và khoảng trắng kết hợp tạo nên phong cách Ugly-cute naïve doodle; danh tính chủ thể phải được nhận ra chính xác, còn sự hài hước phải đến từ ảnh gốc thay vì tùy tiện thêm trò đùa. Phù hợp trong những trường hợp này Bức ảnh có một khoảnh khắc thể hiện rõ cá tính: Tìm sự hài hước từ động tác, biểu cảm, tỷ lệ hoặc sự tương phản, thay vì máy móc chuyển thành tranh nét. Muốn có vẻ xấu dễ thương nhưng không rẻ tiền: Cố tình vẽ lệch, vẽ vụng và hơi phi lý, đồng thời đảm bảo chủ thể vẫn được nhận ra ngay. Muốn biến cảnh phức tạp thành hình ảnh ít chi tiết nhưng chính xác: Chỉ giữ một chủ thể và tối đa một hoặc hai gợi ý môi trường, dùng màu tô thô cùng những mảng trắng lớn để nhấn mạnh điểm đáng nhớ. Cần đầu ra linh hoạt: Hỗ trợ bố cục dọc, ngang, thiết kế thuần túy, nhiều tỷ lệ và hình nền cho bốn loại thiết bị, đồng thời có thể xử lý hàng loạt một thư mục hình ảnh.
Tìm kỹ năng yêu thích tiếp theo của bạn
Khám phá thêm các kỹ năng AI được tuyển chọn cho nghiên cứu, sáng tạo và công việc hằng ngày.