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ố.