تحويل الكود إلى صورة
لماذا نحب هذه المهارة
هذه المهارة تحول الكود إلى صور متميزة مع إبراز الصيغة، تحاكي واجهة الطرفية، وتدعم التحميل بجودة عالية، إنها الأداة المثالية للمطورين لمشاركة مقاطع الكود.
التعليمات
作为一名资深前端开发工程师,你需将内容中的所有代码片段转化为代码高亮的图片,一定是提取所有的代码片段!注意严格以 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。图片按照顺序的数字进行命名。
الوصف
تحويل جميع الأكواد في المقالة إلى صور وتنزيلها بنقرة واحدة.
مهارات ذات صلة
عرض الكل
صوررسم توضيحي هندسي مائي
يحوّل النصوص بسرعة إلى رسوم توضيحية هندسية مائية ذات ملمس ورقي. يكفي أن يُدخل المستخدم المحتوى الذي يريد التعبير عنه، فتولّد المهارة صورًا بأسلوب الألوان المائية الفاتحة والرسومات الهندسية والخطوط الرفيعة، استنادًا إلى النص الأصلي، مع إضافة عناوين أو كلمات مفتاحية قصيرة وسهلة القراءة. تدعم المهارة المحتوى الصيني والإنجليزي والمختلط بينهما. تُنشأ الصور افتراضيًا بنسبة عرض إلى ارتفاع 4:3 بالاتجاه الأفقي، ويمكن تحديد نسب أخرى بحرية مثل 3:4 و1:1 و16:9. وهي مناسبة لملاحظات المعرفة، ومقالات الحسابات الرسمية، ووسائل التواصل الاجتماعي، والمحتوى التعليمي، وشرح المفاهيم، وتقارير العمل.
صورتصميم غلاف تحريري شرقي
أدخل جملة أو مقالة أو رابطًا أو صورة، فيتم تلقائيًا إنشاء غلاف تحريري شرقي معاصر يعطي الأولوية للعنوان ويسهل انتشاره؛ لا حاجة لخبرة في التصميم، ويتكيف بذكاء مع الإطار عند عدم تحديد المقاس.
خلفيات تجريدية انطباعية
قم بإنشاء خلفيات مقصوصة للوحات زيتية انطباعية مع ضربات فرشاة كبيرة وفضفاضة. ينتج 3 تنويعات لكل تشغيل مثل قصاصات مختلفة من نفس اللوحة.
تحويل الكود إلى صورة
لماذا نحب هذه المهارة
هذه المهارة تحول الكود إلى صور متميزة مع إبراز الصيغة، تحاكي واجهة الطرفية، وتدعم التحميل بجودة عالية، إنها الأداة المثالية للمطورين لمشاركة مقاطع الكود.
التعليمات
作为一名资深前端开发工程师,你需将内容中的所有代码片段转化为代码高亮的图片,一定是提取所有的代码片段!注意严格以 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。图片按照顺序的数字进行命名。
الوصف
تحويل جميع الأكواد في المقالة إلى صور وتنزيلها بنقرة واحدة.
مهارات ذات صلة
عرض الكل
صوررسم توضيحي هندسي مائي
يحوّل النصوص بسرعة إلى رسوم توضيحية هندسية مائية ذات ملمس ورقي. يكفي أن يُدخل المستخدم المحتوى الذي يريد التعبير عنه، فتولّد المهارة صورًا بأسلوب الألوان المائية الفاتحة والرسومات الهندسية والخطوط الرفيعة، استنادًا إلى النص الأصلي، مع إضافة عناوين أو كلمات مفتاحية قصيرة وسهلة القراءة. تدعم المهارة المحتوى الصيني والإنجليزي والمختلط بينهما. تُنشأ الصور افتراضيًا بنسبة عرض إلى ارتفاع 4:3 بالاتجاه الأفقي، ويمكن تحديد نسب أخرى بحرية مثل 3:4 و1:1 و16:9. وهي مناسبة لملاحظات المعرفة، ومقالات الحسابات الرسمية، ووسائل التواصل الاجتماعي، والمحتوى التعليمي، وشرح المفاهيم، وتقارير العمل.
صورتصميم غلاف تحريري شرقي
أدخل جملة أو مقالة أو رابطًا أو صورة، فيتم تلقائيًا إنشاء غلاف تحريري شرقي معاصر يعطي الأولوية للعنوان ويسهل انتشاره؛ لا حاجة لخبرة في التصميم، ويتكيف بذكاء مع الإطار عند عدم تحديد المقاس.
خلفيات تجريدية انطباعية
قم بإنشاء خلفيات مقصوصة للوحات زيتية انطباعية مع ضربات فرشاة كبيرة وفضفاضة. ينتج 3 تنويعات لكل تشغيل مثل قصاصات مختلفة من نفس اللوحة.
اعثر على مهارتك المفضلة التالية
استكشف مزيدًا من مهارات الذكاء الاصطناعي المنتقاة للبحث والإبداع والعمل اليومي.