Chuyển đổi mã thành hình ảnh

madeBy
冴羽
installedBy
1
categoryLabelimages
fromYouMind
Editor's Pick

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

Viết

description

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.

Related Skills

View all

Poster nam châm dán tủ lạnh chủ đề du lịch

Tạo poster ảnh du lịch chia dọc với biểu tượng tối giản kiểu nam châm tủ lạnh từ ảnh của người dùng, có nền màu đơn sắc và tùy chọn thêm văn bản phủ lên trên.

Poster nam châm dán tủ lạnh chủ đề du lịch
Máy phát điện 9 ô lưới trên WeChat Moments của luật sư

Máy phát điện 9 ô lưới trên WeChat Moments của luật sư

Công cụ này tạo ra các hình ảnh chuyên nghiệp dạng lưới 9 ô cho Khoảnh khắc WeChat của luật sư, sử dụng cấu trúc tường thuật gồm các nghiên cứu trường hợp và lời khuyên để tạo cảm giác cấp bách cho khách hàng tiềm năng, thúc đẩy họ tìm đến tư vấn pháp lý. Nó hỗ trợ thông tin và hình đại diện luật sư được tùy chỉnh, sử dụng thiết kế vẽ tay theo phong cách bảng trắng để tránh việc giảng giải pháp lý khô khan và kết nối với khách hàng thông qua ngôn ngữ thấu cảm. Kỹ năng này đã giúp tôi đạt được khả năng kiếm tiền liên tục. Logic của nó cũng có thể được áp dụng cho các chuyên gia tương tự, luật sư hành nghề độc lập và những người cần tìm kiếm khách hàng.

Máy phát điện 9 ô lưới trên WeChat Moments của luật sư

Công cụ tạo tâm trạng pixel văn hóa thành phố

Tạo ra những tấm áp phích thể hiện nét văn hóa theo phong cách nghệ thuật pixel cho bất kỳ thành phố nào trên toàn thế giới, phân tích sâu sắc văn hóa đô thị. Trình bày bản sắc thực sự của một thành phố với thẩm mỹ chắp vá thêu 8-bit, sử dụng kỹ thuật ghép ảnh thêu pixel để tạo ra tấm áp phích "thể hiện nét văn hóa" cho bất kỳ thành phố nào. Chỉ cần nhập tên thành phố, bạn sẽ nhận được một tấm áp phích pixel đầy cảm xúc.

Công cụ tạo tâm trạng pixel văn hóa thành phố

Find your next favorite skill

Explore more curated AI skills for research, creation, and everyday work.

Explore all skills