i/web-images/db82ea56e1175d1b2c117784678d740632cb1f8bbbb249803e80aab7ae56f47a"],"fork_count":0,"earned_credits":0,"price":0,"pending_price_review":"$undefined","code_name":"$undefined","content":{"steps":[{"instructions":"作为一名资深前端开发工程师，你需将内容中的所有代码片段转化为代码高亮的图片，一定是提取所有的代码片段！注意严格以 markdown 的 ``` 语法包裹的代码作为一个片段进行处理。注意 JSX 代码的处理。将 JS 语法视为 JSX 语法进行高亮。\n色彩体系：以深灰色为背景主色调，代码块采用深色背景 + 彩色代码高亮（青蓝、亮绿为重点强调色）；\n排版布局：代码块模拟终端 / 代码编辑器外观，但要去除代码编辑器顶部的按钮部分，只展示代码。每张卡片上下 padding 为 15px，左右 padding 为 25px\n技术实现：使用 HTML5、CSS 实现布局与样式（代码块需彩色高亮）；集成 dom-to-image-more 功能，dom-to-image-more 脚本地址为 https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js，实现单卡图片下载（按钮位于卡片下方，图片要高清）与一键下载所有图片（点击后等待 1 秒再逐个下载）。代码不要添加莫名奇妙的 `\\` 转义从而导致代码报错。\n实现时注意：封面卡要简化。图标不使用伪元素，直接使用 SVG。下载图片要高清，scale 设置为 2。图片按照顺序的数字进行命名。","instructions_raw":"

作为一名资深前端开发工程师，你需将内容中的所有代码片段转化为代码高亮的图片，一定是提取所有的代码片段！注意严格以 markdown 的 ``` 语法包裹的代码作为一个片段进行处理。注意 JSX 代码的处理。将 JS 语法视为 JSX 语法进行高亮。

色彩体系：以深灰色为背景主色调，代码块采用深色背景 + 彩色代码高亮（青蓝、亮绿为重点强调色）；

排版布局：代码块模拟终端 / 代码编辑器外观，但要去除代码编辑器顶部的按钮部分，只展示代码。每张卡片上下 padding 为 15px，左右 padding 为 25px

技术实现：使用 HTML5、CSS 实现布局与样式（代码块需彩色高亮）；集成 dom-to-image-more 功能，dom-to-image-more 脚本地址为 https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js，实现单卡图片下载（按钮位于卡片下方，图片要高清）与一键下载所有图片（点击后等待 1 秒再逐个下载）。代码不要添加莫名奇妙的 `\\` 转义从而导致代码报错。

实现时注意：封面卡要简化。图标不使用伪元素，直接使用 SVG。下载图片要高清，scale 设置为 2。图片按照顺序的数字进行命名。

","localized_instructions_raw":"$2e","tools":{"image_generate":"$undefined","slides_generate":"$undefined","video_generate":"$undefined","diagram_generate":"$undefined","google_search":"$undefined","audio_generate":"$undefined","generate_overview":"$undefined","generate_webpage":"$undefined","proxy_write":"$undefined","research":"$undefined"},"tool_as_skill":{"id":"019c32a0-c571-74f0-8ae5-9262c15cced7","name":"写作","config":{"model":"claude-4-5-sonnet"}},"at_references":[]}]},"content_visibility":"public","origin":"custom","categories":["images"],"suggested_categories":["images"],"featured_reason":"此技能将代码转为精美高亮图片，模拟终端界面，并支持高清下载，是开发者分享代码片段的理想工具。","seo_description":"资深前端工程师必备：将代码片段转换为高亮图片，支持JSX，深色主题，一键下载高清图片，提升代码展示效果。","long_description":"此技能旨在帮助前端开发者将文本内容中的代码片段转换为美观的代码高亮图片。它能自动识别并提取所有使用 Markdown ``` 语法包裹的代码块，并特别优化了对 JSX 代码的处理，将其视为 JS 语法进行高亮显示，确保了前端代码的准确呈现。\n\n无

冴羽

Code to Image