代码转图片
指令
作为一名资深前端开发工程师,你需将内容中的所有代码片段转化为代码高亮的图片,一定是提取所有的代码片段!注意严格以 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。图片按照顺序的数字进行命名。
描述
为什么我们推荐这个技能
此技能将代码转为精美高亮图片,模拟终端界面,并支持高清下载,是开发者分享代码片段的理想工具。
将文章中的所有代码转成图片并一键下载
相关技能
查看全部
图片文章内容批量配图神器2.0
这是一款专为内容创作者打造的智能视觉增强工具,能够深度理解您的文字脉络,并为文章的关键段落自动创作高质量的配套插图。无论您的内容存储在个人知识库中,还是需要处理外部导入的长篇文章,它都能精准识别核心概念,将抽象的文字转化为具象的视觉语言,显著提升内容的阅读体验与传播力。 该工具提供三种独具特色的视觉风格以适配不同的创作场景:清新活泼的简约手绘风适合散文与科普;严谨专业的建筑蓝图风是技术文档与研究报告的理想选择;而现代感十足的扁平插画风则能完美契合自媒体公众号与知识笔记的审美需求。针对长篇幅内容,它还会智能建议配图方案,确保视觉分布合理且重点突出。 在生成过程中,您可以灵活选择图片的产出方式。您可以要求将生成的精美插图直接无缝嵌入到原有的文档段落中,实现排版自动化;也可以选择获取独立的图片资源包进行手动分发。这种从内容解析到视觉生成的全流程协作,让您的文字表达更具冲击力,让复杂的观点变得一目了然。
程序员漫画生成器
一个技术主题,批量生成多张可直接发的程序员漫画。只需说“主题、生成几张、每张几格”,就能得到多张独立故事:不同报错、不同荒诞隐喻、不同反转,不是拼贴图,也不是换标题的重复内容。支持 3、4、6、8 格;默认同一主角连载,也能每张换角色。无需上传代码或内部截图,只留下一句已脱敏的职场瞬间。
代码转图片
指令
作为一名资深前端开发工程师,你需将内容中的所有代码片段转化为代码高亮的图片,一定是提取所有的代码片段!注意严格以 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。图片按照顺序的数字进行命名。
描述
为什么我们推荐这个技能
此技能将代码转为精美高亮图片,模拟终端界面,并支持高清下载,是开发者分享代码片段的理想工具。
将文章中的所有代码转成图片并一键下载
相关技能
查看全部
图片文章内容批量配图神器2.0
这是一款专为内容创作者打造的智能视觉增强工具,能够深度理解您的文字脉络,并为文章的关键段落自动创作高质量的配套插图。无论您的内容存储在个人知识库中,还是需要处理外部导入的长篇文章,它都能精准识别核心概念,将抽象的文字转化为具象的视觉语言,显著提升内容的阅读体验与传播力。 该工具提供三种独具特色的视觉风格以适配不同的创作场景:清新活泼的简约手绘风适合散文与科普;严谨专业的建筑蓝图风是技术文档与研究报告的理想选择;而现代感十足的扁平插画风则能完美契合自媒体公众号与知识笔记的审美需求。针对长篇幅内容,它还会智能建议配图方案,确保视觉分布合理且重点突出。 在生成过程中,您可以灵活选择图片的产出方式。您可以要求将生成的精美插图直接无缝嵌入到原有的文档段落中,实现排版自动化;也可以选择获取独立的图片资源包进行手动分发。这种从内容解析到视觉生成的全流程协作,让您的文字表达更具冲击力,让复杂的观点变得一目了然。
程序员漫画生成器
一个技术主题,批量生成多张可直接发的程序员漫画。只需说“主题、生成几张、每张几格”,就能得到多张独立故事:不同报错、不同荒诞隐喻、不同反转,不是拼贴图,也不是换标题的重复内容。支持 3、4、6、8 格;默认同一主角连载,也能每张换角色。无需上传代码或内部截图,只留下一句已脱敏的职场瞬间。
发现下一个适合你的技能
继续探索更多精选 AI 技能,用于研究、创作和日常工作。