Why we love this skill
Esta función convierte el código en imágenes con resaltado de alta calidad, simula una interfaz de terminal y admite descargas en alta definición, lo que la convierte en una herramienta ideal para que los desarrolladores compartan fragmentos de código.
Instrucciones
Como desarrollador front-end sénior, debes convertir todos los fragmentos de código del contenido en imágenes resaltadas. ¡Es fundamental extraer todos los fragmentos de código! Ten en cuenta que el código encerrado entre comillas invertidas (``) de Markdown debe tratarse como un único fragmento. Presta especial atención al código JSX. Trata la sintaxis de JavaScript como si fuera JSX para el resaltado.
Combinación de colores: El gris oscuro se utiliza como color de fondo principal, y los bloques de código utilizan un fondo oscuro con resaltados de código de color (el cian y el verde brillante son los colores clave para enfatizar).
Diseño: Los bloques de código simulan la apariencia de una terminal/editor de código, pero se han eliminado los botones de la parte superior del editor, mostrando únicamente el código. Cada tarjeta tiene un margen superior e inferior de 15 píxeles y un margen izquierdo y derecho de 25 píxeles.
Implementación técnica: El diseño y el estilo se implementan mediante HTML5 y CSS (los bloques de código deben resaltarse en color); la función dom-to-image-more está integrada. La dirección del script dom-to-image-more es https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js, que permite la descarga de imágenes de una sola tarjeta (botón ubicado debajo de la tarjeta, las imágenes deben ser de alta resolución) y la descarga con un solo clic de todas las imágenes (después de hacer clic, espere 1 segundo antes de descargar las imágenes una por una). Evite agregar comillas invertidas innecesarias (`\`) al código, ya que esto puede causar errores.
Al implementar esto, tenga en cuenta lo siguiente: Mantenga la tarjeta de portada simple. No utilice pseudoelementos para los iconos; use SVG directamente. Las imágenes descargadas deben ser de alta resolución, con una escala de 2. Nombre las imágenes secuencialmente usando números.
description
Convierte todo el código del artículo en imágenes y descárgalas con un solo clic.
Related Skills
View all
Solicitud de inversión de imagen
Los usuarios proporcionan una imagen y Skill, al igual que la ingeniería inversa, extrae con precisión toda la información visual, como el estilo, la composición, la forma del sujeto, el color y la atmósfera, generando una sugerencia que permite crear una imagen casi idéntica. También se incluye un tutorial sencillo para la creación de obras derivadas.
Hay pinturas en las palabras, y clásicos en las pinturas.
Introduce una expresión idiomática, selecciona entre 20 estilos de imagen y genera automáticamente una "Tarjeta de análisis de la expresión idiomática (que incluye pinyin, significado original, significado extendido, oración de ejemplo y situaciones aplicables)" y una "Imagen que coincide con la concepción artística de la expresión idiomática". Ambas se combinan en una misma imagen y se muestran horizontalmente.
Director de Fotografía de Mascotas | Crea fotos cinematográficas de mascotas con un solo clic
¿Quieres pintar una acuarela ligera y etérea para tu amigo peludo? ¿Quieres ver a tu Golden Retriever con un traje espacial? ¿Quieres convertir a tu gato atigrado naranja en un personaje de una película de Ghibli? No necesitas ir a un estudio fotográfico ni entender complicadas instrucciones de IA. Esta habilidad es tu "director visual personalizado para mascotas", con dos funciones geniales: 1. Transformación de fotos (muy recomendable): Sube una foto de tu mascota, elige un estilo y generará al instante una imagen impresionante que conserva sus rasgos originales. 2. Invocación de texto: ¿No tienes foto? Simplemente escribe una descripción (por ejemplo, "Un bulldog francés con gafas de sol conduce un coche deportivo") y generará una imagen. Traduce automáticamente instrucciones profesionales y genera una imagen directamente en el chat. Incluye 14 estilos populares (incluidos los últimos estilos de acuarela pintada a mano y estilos japoneses pintados a mano), con cambio con un solo clic. ¡Cambiar tu salvapantallas a diario es así de sencillo!
Código para imagen
Why we love this skill
Esta función convierte el código en imágenes con resaltado de alta calidad, simula una interfaz de terminal y admite descargas en alta definición, lo que la convierte en una herramienta ideal para que los desarrolladores compartan fragmentos de código.
Instrucciones
Como desarrollador front-end sénior, debes convertir todos los fragmentos de código del contenido en imágenes resaltadas. ¡Es fundamental extraer todos los fragmentos de código! Ten en cuenta que el código encerrado entre comillas invertidas (``) de Markdown debe tratarse como un único fragmento. Presta especial atención al código JSX. Trata la sintaxis de JavaScript como si fuera JSX para el resaltado.
Combinación de colores: El gris oscuro se utiliza como color de fondo principal, y los bloques de código utilizan un fondo oscuro con resaltados de código de color (el cian y el verde brillante son los colores clave para enfatizar).
Diseño: Los bloques de código simulan la apariencia de una terminal/editor de código, pero se han eliminado los botones de la parte superior del editor, mostrando únicamente el código. Cada tarjeta tiene un margen superior e inferior de 15 píxeles y un margen izquierdo y derecho de 25 píxeles.
Implementación técnica: El diseño y el estilo se implementan mediante HTML5 y CSS (los bloques de código deben resaltarse en color); la función dom-to-image-more está integrada. La dirección del script dom-to-image-more es https://cdn.jsdelivr.net/npm/dom-to-image-more@2.8.0/dist/dom-to-image-more.min.js, que permite la descarga de imágenes de una sola tarjeta (botón ubicado debajo de la tarjeta, las imágenes deben ser de alta resolución) y la descarga con un solo clic de todas las imágenes (después de hacer clic, espere 1 segundo antes de descargar las imágenes una por una). Evite agregar comillas invertidas innecesarias (`\`) al código, ya que esto puede causar errores.
Al implementar esto, tenga en cuenta lo siguiente: Mantenga la tarjeta de portada simple. No utilice pseudoelementos para los iconos; use SVG directamente. Las imágenes descargadas deben ser de alta resolución, con una escala de 2. Nombre las imágenes secuencialmente usando números.
description
Convierte todo el código del artículo en imágenes y descárgalas con un solo clic.
Related Skills
View allSolicitud de inversión de imagen
Los usuarios proporcionan una imagen y Skill, al igual que la ingeniería inversa, extrae con precisión toda la información visual, como el estilo, la composición, la forma del sujeto, el color y la atmósfera, generando una sugerencia que permite crear una imagen casi idéntica. También se incluye un tutorial sencillo para la creación de obras derivadas.
Hay pinturas en las palabras, y clásicos en las pinturas.
Introduce una expresión idiomática, selecciona entre 20 estilos de imagen y genera automáticamente una "Tarjeta de análisis de la expresión idiomática (que incluye pinyin, significado original, significado extendido, oración de ejemplo y situaciones aplicables)" y una "Imagen que coincide con la concepción artística de la expresión idiomática". Ambas se combinan en una misma imagen y se muestran horizontalmente.
Director de Fotografía de Mascotas | Crea fotos cinematográficas de mascotas con un solo clic
¿Quieres pintar una acuarela ligera y etérea para tu amigo peludo? ¿Quieres ver a tu Golden Retriever con un traje espacial? ¿Quieres convertir a tu gato atigrado naranja en un personaje de una película de Ghibli? No necesitas ir a un estudio fotográfico ni entender complicadas instrucciones de IA. Esta habilidad es tu "director visual personalizado para mascotas", con dos funciones geniales: 1. Transformación de fotos (muy recomendable): Sube una foto de tu mascota, elige un estilo y generará al instante una imagen impresionante que conserva sus rasgos originales. 2. Invocación de texto: ¿No tienes foto? Simplemente escribe una descripción (por ejemplo, "Un bulldog francés con gafas de sol conduce un coche deportivo") y generará una imagen. Traduce automáticamente instrucciones profesionales y genera una imagen directamente en el chat. Incluye 14 estilos populares (incluidos los últimos estilos de acuarela pintada a mano y estilos japoneses pintados a mano), con cambio con un solo clic. ¡Cambiar tu salvapantallas a diario es así de sencillo!
Find your next favorite skill
Explore more curated AI skills for research, creation, and everyday work.
