Why we love this skill
This skill converts code into beautifully highlighted images, simulates a terminal interface, and supports high-definition downloads, making it an ideal tool for developers to share code snippets.
Instructions
As a senior front-end developer, you need to convert all code snippets in the content into highlighted images. It's crucial to extract all code snippets! Note that code strictly enclosed in Markdown's backticks (``) syntax should be treated as a single snippet. Pay special attention to JSX code. Treat JS syntax as JSX syntax for highlighting.
Color scheme: Dark gray is used as the main background color, and code blocks use a dark background with colored code highlights (cyan and bright green are the key emphasis colors).
Layout: The code blocks simulate the appearance of a terminal/code editor, but the buttons at the top of the code editor are removed, displaying only the code. Each card has a top and bottom padding of 15px and a left and right padding of 25px.
Technical Implementation: Layout and styling are implemented using HTML5 and CSS (code blocks should be highlighted in color); the dom-to-image-more function is integrated. The dom-to-image-more script address is https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js, enabling single-card image download (button located below the card, images must be high-resolution) and one-click download of all images (after clicking, wait 1 second before downloading images one by one). Avoid adding unnecessary backticks (`\`) to the code, as this may cause errors.
When implementing this, please note: Keep the cover card simple. Do not use pseudo-elements for icons; use SVG directly. Downloaded images should be high-resolution, with a scale of 2. Name the images sequentially using numbers.
description
Convert all the code in the article into images and download them with one click.
Related Skills
View all
Image Reverse Prompt
Users provide an image, and Skill, like reverse engineering, precisely extracts all visual information such as style, composition, subject shape, color, and atmosphere, outputting a prompt that can directly generate an almost identical image. A lightweight tutorial for derivative works is also included.
There are paintings in the words, and classics in the paintings.
Input an idiom, select from 20 image styles, and automatically generate an "Idiom Analysis Card (including pinyin, original meaning, extended meaning, example sentence, and applicable scenarios)" and an "Image that matches the artistic conception of the idiom". The two are then combined on the same image and output horizontally.
Pet Photography Director | Generate Cinematic Pet Photos with One Click
Want to paint a light and airy hand-painted watercolor for your furry friend? Want to see your Golden Retriever in a spacesuit? Want to turn your orange tabby into a Ghibli movie character? No need to go to a photo studio or understand complicated AI prompts. This skill is your "personalized pet visual director," supporting two super cool features: 1. Photo Transformation (Highly Recommended): Upload a photo of your pet, choose a style, and it will instantly generate a stunning image that retains its true features! 2. Text Summoning: No photo? Just type a description (e.g., "A French Bulldog wearing sunglasses is driving a sports car"), and it will still generate an image. It automatically translates professional prompts and generates an image directly within the chat box. It includes 14 popular styles (including the latest hand-painted watercolor and Japanese hand-painted styles), supporting one-click switching. Changing your screensaver daily is that simple!
Code to Image
Why we love this skill
This skill converts code into beautifully highlighted images, simulates a terminal interface, and supports high-definition downloads, making it an ideal tool for developers to share code snippets.
Instructions
As a senior front-end developer, you need to convert all code snippets in the content into highlighted images. It's crucial to extract all code snippets! Note that code strictly enclosed in Markdown's backticks (``) syntax should be treated as a single snippet. Pay special attention to JSX code. Treat JS syntax as JSX syntax for highlighting.
Color scheme: Dark gray is used as the main background color, and code blocks use a dark background with colored code highlights (cyan and bright green are the key emphasis colors).
Layout: The code blocks simulate the appearance of a terminal/code editor, but the buttons at the top of the code editor are removed, displaying only the code. Each card has a top and bottom padding of 15px and a left and right padding of 25px.
Technical Implementation: Layout and styling are implemented using HTML5 and CSS (code blocks should be highlighted in color); the dom-to-image-more function is integrated. The dom-to-image-more script address is https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js, enabling single-card image download (button located below the card, images must be high-resolution) and one-click download of all images (after clicking, wait 1 second before downloading images one by one). Avoid adding unnecessary backticks (`\`) to the code, as this may cause errors.
When implementing this, please note: Keep the cover card simple. Do not use pseudo-elements for icons; use SVG directly. Downloaded images should be high-resolution, with a scale of 2. Name the images sequentially using numbers.
description
Convert all the code in the article into images and download them with one click.
Related Skills
View allImage Reverse Prompt
Users provide an image, and Skill, like reverse engineering, precisely extracts all visual information such as style, composition, subject shape, color, and atmosphere, outputting a prompt that can directly generate an almost identical image. A lightweight tutorial for derivative works is also included.
There are paintings in the words, and classics in the paintings.
Input an idiom, select from 20 image styles, and automatically generate an "Idiom Analysis Card (including pinyin, original meaning, extended meaning, example sentence, and applicable scenarios)" and an "Image that matches the artistic conception of the idiom". The two are then combined on the same image and output horizontally.
Pet Photography Director | Generate Cinematic Pet Photos with One Click
Want to paint a light and airy hand-painted watercolor for your furry friend? Want to see your Golden Retriever in a spacesuit? Want to turn your orange tabby into a Ghibli movie character? No need to go to a photo studio or understand complicated AI prompts. This skill is your "personalized pet visual director," supporting two super cool features: 1. Photo Transformation (Highly Recommended): Upload a photo of your pet, choose a style, and it will instantly generate a stunning image that retains its true features! 2. Text Summoning: No photo? Just type a description (e.g., "A French Bulldog wearing sunglasses is driving a sports car"), and it will still generate an image. It automatically translates professional prompts and generates an image directly within the chat box. It includes 14 popular styles (including the latest hand-painted watercolor and Japanese hand-painted styles), supporting one-click switching. Changing your screensaver daily is that simple!
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
