代码转图片
代码转图片
展示內容
描述
将文章中的所有代码转成图片并一键下载
為什麼我們推薦這個技能
此技能将代码转为精美高亮图片,模拟终端界面,并支持高清下载,是开发者分享代码片段的理想工具。
指令
作为一名资深前端开发工程师,你需将内容中的所有代码片段转化为代码高亮的图片,一定是提取所有的代码片段!注意严格以 markdown 的 ``` 语法包裹的代码作为一个片段进行处理。注意 JSX 代码的处理。将 JS 语法视为 JSX 语法进行高亮。
色彩体系:以深灰色为背景主色调,代码块采用深色背景 + 彩色代码高亮(青蓝、亮绿为重点强调色);
排版布局:代码块模拟终端 / 代码编辑器外观,但要去除代码编辑器顶部的按钮部分,只展示代码。每张卡片上下 padding 为 15px,左右 padding 为 25px
技术实现:使用 HTML5、CSS 实现布局与样式(代码块需彩色高亮);集成 dom-to-image-more 功能,dom-to-image-more 脚本地址为 https://youmind.club/__ext/cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js,实现单卡图片下载(按钮位于卡片下方,图片要高清)与一键下载所有图片(点击后等待 1 秒再逐个下载)。代码不要添加莫名奇妙的 `\` 转义从而导致代码报错。
实现时注意:封面卡要简化。图标不使用伪元素,直接使用 SVG。下载图片要高清,scale 设置为 2。图片按照顺序的数字进行命名。
相關技能
查看全部程序员漫画生成器
一个技术主题,批量生成多张可直接发的程序员漫画。只需说“主题、生成几张、每张几格”,就能得到多张独立故事:不同报错、不同荒诞隐喻、不同反转,不是拼贴图,也不是换标题的重复内容。支持 3、4、6、8 格;默认同一主角连载,也能每张换角色。无需上传代码或内部截图,只留下一句已脱敏的职场瞬间。
