代码转图片
لماذا نحب هذه المهارة
此技能将代码转为精美高亮图片,模拟终端界面,并支持高清下载,是开发者分享代码片段的理想工具。
التعليمات
作为一名资深前端开发工程师,你需将内容中的所有代码片段转化为代码高亮的图片,一定是提取所有的代码片段!注意严格以 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。图片按照顺序的数字进行命名。
الوصف
将文章中的所有代码转成图片并一键下载
مهارات ذات صلة
عرض الكلImpressionist Abstract Backgrounds
Generate impressionist oil painting cropped backgrounds with large, loose brushstrokes. Outputs 3 variations per run like different crops from the same painting.
YouTube Thumbnail Tasarla
Video konusunu ve hedef kitleyi güncel eğilimlerle analiz eder, üç test edilebilir konsept sunar ve seçilen yönü profesyonel 16:9 YouTube thumbnail’ına dönüştürür.
虚实点睛手绘师 Pro
上传一张照片,AI 先像视觉分析师一样从五个维度读懂它——主体是什么、怎么构图的、色彩基调、视觉重心在哪、传递什么情绪。然后告诉你:哪里最值得做手绘化,怎么改最好看。 三种虚实模式,三种玩法: 🔹 局部点睛 — 整体保持真实,AI 精选 2-3 处局部替换为手绘风格。招牌上的花纹、手中的咖啡杯、花丛里探出的几朵花——点到即止,照片瞬间有了呼吸感。4 种手绘风格:素描线稿 / 水彩晕染 / 贴纸涂鸦 / 黏土浮雕。 🔹 主体漫化 — 人物、动物、物体,整体变成动漫风格,背景保持真实摄影质感。5 种动漫风格:热血日漫 / 美式英雄漫 / 吉卜力风 / 韩式条漫 / 国风水墨。效果就像动漫角色走进了真实世界。 🔹 环境漫化 — 反过来玩:主体保持真实,周围环境全部变成动漫风格。人在二次元世界里的反差感,一键拉满。 每种模式 × 2 种融合方式: 渐变羽化(虚实自然过渡,像水墨洇开)/ 手绘边框(白边描边,像贴纸贴上去)。 不盲目甩图,每一步你说了算。 AI 先分析 → 推荐方案 → 你确认 → 再生成,拒绝废图。人像照片自动避开面部五官,不做手绘替换;局部数量控制在 2-3 处,位置和面积都有专业约束——出来的是「点睛」,不是「拼贴」。 3 种模式 · 9 种风格 · 2 种融合 = 28 种虚实组合。 同一张照片,能玩出完全不同的感觉。
代码转图片
لماذا نحب هذه المهارة
此技能将代码转为精美高亮图片,模拟终端界面,并支持高清下载,是开发者分享代码片段的理想工具。
التعليمات
作为一名资深前端开发工程师,你需将内容中的所有代码片段转化为代码高亮的图片,一定是提取所有的代码片段!注意严格以 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。图片按照顺序的数字进行命名。
الوصف
将文章中的所有代码转成图片并一键下载
مهارات ذات صلة
عرض الكلImpressionist Abstract Backgrounds
Generate impressionist oil painting cropped backgrounds with large, loose brushstrokes. Outputs 3 variations per run like different crops from the same painting.
YouTube Thumbnail Tasarla
Video konusunu ve hedef kitleyi güncel eğilimlerle analiz eder, üç test edilebilir konsept sunar ve seçilen yönü profesyonel 16:9 YouTube thumbnail’ına dönüştürür.
虚实点睛手绘师 Pro
上传一张照片,AI 先像视觉分析师一样从五个维度读懂它——主体是什么、怎么构图的、色彩基调、视觉重心在哪、传递什么情绪。然后告诉你:哪里最值得做手绘化,怎么改最好看。 三种虚实模式,三种玩法: 🔹 局部点睛 — 整体保持真实,AI 精选 2-3 处局部替换为手绘风格。招牌上的花纹、手中的咖啡杯、花丛里探出的几朵花——点到即止,照片瞬间有了呼吸感。4 种手绘风格:素描线稿 / 水彩晕染 / 贴纸涂鸦 / 黏土浮雕。 🔹 主体漫化 — 人物、动物、物体,整体变成动漫风格,背景保持真实摄影质感。5 种动漫风格:热血日漫 / 美式英雄漫 / 吉卜力风 / 韩式条漫 / 国风水墨。效果就像动漫角色走进了真实世界。 🔹 环境漫化 — 反过来玩:主体保持真实,周围环境全部变成动漫风格。人在二次元世界里的反差感,一键拉满。 每种模式 × 2 种融合方式: 渐变羽化(虚实自然过渡,像水墨洇开)/ 手绘边框(白边描边,像贴纸贴上去)。 不盲目甩图,每一步你说了算。 AI 先分析 → 推荐方案 → 你确认 → 再生成,拒绝废图。人像照片自动避开面部五官,不做手绘替换;局部数量控制在 2-3 处,位置和面积都有专业约束——出来的是「点睛」,不是「拼贴」。 3 种模式 · 9 种风格 · 2 种融合 = 28 种虚实组合。 同一张照片,能玩出完全不同的感觉。
اعثر على مهارتك المفضلة التالية
استكشف مزيدًا من مهارات الذكاء الاصطناعي المنتقاة للبحث والإبداع والعمل اليومي.