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.