代码转图片

أنشأها
冴羽
ثبّتها
4
الفئةصور
منYouMind
اختيار المحررين

لماذا نحب هذه المهارة

此技能将代码转为精美高亮图片,模拟终端界面,并支持高清下载,是开发者分享代码片段的理想工具。

التعليمات

作为一名资深前端开发工程师,你需将内容中的所有代码片段转化为代码高亮的图片,一定是提取所有的代码片段!注意严格以 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.

S
20مجاني
صور

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.

O
138مجاني
صور

虚实点睛手绘师 Pro

上传一张照片,AI 先像视觉分析师一样从五个维度读懂它——主体是什么、怎么构图的、色彩基调、视觉重心在哪、传递什么情绪。然后告诉你:哪里最值得做手绘化,怎么改最好看。 三种虚实模式,三种玩法: 🔹 局部点睛 — 整体保持真实,AI 精选 2-3 处局部替换为手绘风格。招牌上的花纹、手中的咖啡杯、花丛里探出的几朵花——点到即止,照片瞬间有了呼吸感。4 种手绘风格:素描线稿 / 水彩晕染 / 贴纸涂鸦 / 黏土浮雕。 🔹 主体漫化 — 人物、动物、物体,整体变成动漫风格,背景保持真实摄影质感。5 种动漫风格:热血日漫 / 美式英雄漫 / 吉卜力风 / 韩式条漫 / 国风水墨。效果就像动漫角色走进了真实世界。 🔹 环境漫化 — 反过来玩:主体保持真实,周围环境全部变成动漫风格。人在二次元世界里的反差感,一键拉满。 每种模式 × 2 种融合方式: 渐变羽化(虚实自然过渡,像水墨洇开)/ 手绘边框(白边描边,像贴纸贴上去)。 不盲目甩图,每一步你说了算。 AI 先分析 → 推荐方案 → 你确认 → 再生成,拒绝废图。人像照片自动避开面部五官,不做手绘替换;局部数量控制在 2-3 处,位置和面积都有专业约束——出来的是「点睛」,不是「拼贴」。 3 种模式 · 9 种风格 · 2 种融合 = 28 种虚实组合。 同一张照片,能玩出完全不同的感觉。

B
23k

اعثر على مهارتك المفضلة التالية

استكشف مزيدًا من مهارات الذكاء الاصطناعي المنتقاة للبحث والإبداع والعمل اليومي.

استكشف كل المهارات