Uso de Transformers para Shiki para enriquecer el resaltado de sintaxis en Astro

Using GreenSock Animation Platform (GSAP) in Astro: A Step-by-Step Guide

En esta guía, aprenderá cómo usar transformadores para el resaltador de sintaxis de Shiki en una aplicación Astro. Pasará por el proceso de configurar un nuevo proyecto Astro, instalar los transformadores para Shiki y representar las adiciones y eliminaciones de código. También aprenderá cómo centrarse en líneas específicas de una manera visualmente atractiva

Requisitos previos

Necesitará lo siguiente:

Nodejs 18 o posterior

Tabla de contenido

Crear una nueva aplicación Astro
[Integra Transformers para Shiki en tu proyecto Astro](#integra transformadores-para-shiki-en-tu-proyecto-astro)
- Instalar Transformers para Shiki
- Cargar transformadores para Shiki en configuración Astro
[Crea y prueba tu aplicación Astro localmente](#construye y prueba-tu-aplicación-astro-localmente)

Crea una nueva aplicación Astro

Comencemos creando un nuevo proyecto Astro. Ejecute el siguiente comando:

npm create astro@latest my-app

npm create astro es la forma recomendada de desarrollar rápidamente un proyecto Astro

Cuando se le solicite, elija:

Empty cuando se le pregunta cómo iniciar el nuevo proyecto
Sí cuando se le pregunte si planea escribir Typecript
Estricto cuando se le pregunta qué tan estricto debe ser Typecript.
Sí cuando se le solicita instalar dependencias
Sí cuando se le solicita inicializar un repositorio de git

Una vez hecho esto, puede ir al directorio del proyecto e iniciar la aplicación:

cd my-app
npm run dev

La aplicación debería estar ejecutándose en localhost:4321

Ahora, pasemos a integrar transformadores para Shiki en tu aplicación Astro.

Integra Transformers para Shiki en tu proyecto Astro

Instalar transformadores para Shiki

Ejecute el siguiente comando para instalar el paquete necesario para usar transformadores para Shiki:

npm install @shikijs/transformers

El comando instala la siguiente biblioteca:

@shikijs/transformers: Una colección de transformadores para shiki

Esa es la única biblioteca necesaria para representar el código de una manera visualmente atractiva. Actualicemos nuestra configuración de Astro para cargar estos transformadores.

Cargar transformadores para Shiki en configuración Astro

Para ver los transformadores de Shiki vigentes, importe lo siguiente en su archivo de configuración de Astro (astroconfigmjs)

transformerNotationDiff: Le permite representar un cambio en una línea de código
transformerMetaHighlight: Le permite resaltar una línea de código
transformerNotationFocus: Le permite enfocar una línea de código

import { defineConfig } from 'astro/config'
import {
  transformerNotationDiff,
  transformerNotationFocus,
  transformerMetaHighlight
} from '@shikijs/transformers'

export default defineConfig({
  markdown: {
    syntaxHighlight: 'shiki',
    shikiConfig: {
      theme: 'github-dark',
      transformers: [
        transformerNotationDiff(),
        transformerNotationFocus(),
        transformerMetaHighlight(),
      ],
    },
  },
})

Para demostrar el uso de estos transformadores, creará un archivo de rebajas en el directorio src/content/blog. Creemos un samplemd dentro del directorio (src/content/blog) con el siguiente contenido:

---
slug: 'sample'
title: 'Sample Title'
description: 'Sample Description'
created_at: 2024-04-15T00:00:00.000+00:00
---

```tsx
consolelog("Introducción")

consolelog("Resta") // [!code focus] // [!code --]

consolelog("Adición") // [!code focus] // [!code ++]

consolelog("En foco") // [!code focus]

consolelog("Fin")
```

En la rebaja, verá que las líneas que deben representarse de manera diferente tienen cadenas tipo comentarios. Aquí están esas tres cadenas:

// [!code --]: Le permite especificar qué línea debe representarse como una eliminación
// [!code ++]: Le permite especificar qué línea debe representarse como una adición
// [!code focus]: Le permite especificar qué línea debe estar enfocada. Esto se hace difuminando el resto de las líneas del código.

Estas cadenas específicas generan una clase CSS con la línea que necesitamos definir nosotros mismos. Definamos el CSS particular requerido en el archivo src/pages/indexastro:

---
// File: src/pages/index.astro // [!code focus]
---
// [!code focus]
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
    <style is:global>
      .line {
        display: inline;
        padding-bottom: 0;
      }
      .diff {
        display: inline-block;
        width: 100vw;
        margin: 0 -12px;
        padding: 0 12px;
      }
      .diff.add {
        background-color: #0505;
      }
      .diff.remove {
        background-color: #8005;
      }
      .diff:before {
        position: absolute;
        left: 40px;
      }
      .has-focused .line {
        filter: blur(0.095rem);
      }
      .has-focused .focused {
        filter: blur(0);
      }
    </style>
  </head>
  <body>
    <h1>Astro<h1/>
  </body>
</html>

Básicamente, ha agregado un conjunto de clases que eligen cómo se vería una línea agregada, eliminada o enfocada. Ahora, renderice la reducción usando el resaltado de sintaxis Shiki predeterminado en Astro.Para hacerlo, realice las siguientes adiciones en la ruta del índice:

---
// File: src/pages/index.astro // [!code focus]

const blogData = await Astro.glob('../content/blog/sample.md') // [!code focus]
const markdown = await blogData[0].compiledContent()
---

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
    <meta name="viewport" content="width=device-width" />
    <meta name="generator" content={Astro.generator} />
    <title>Astro</title>
    <style is:global>
      .line {
        display: inline;
        padding-bottom: 0;
      }
      .diff {
        display: inline-block;
        width: 100vw;
        margin: 0 -12px;
        padding: 0 12px;
      }
      .diff.add {
        background-color: #0505;
      }
      .diff.remove {
        background-color: #8005;
      }
      .diff:before {
        position: absolute;
        left: 40px;
      }
      .has-focused .line {
        filter: blur(0.095rem);
      }
      .has-focused .focused {
        filter: blur(0);
      }
    </style>
  </head>
  <body>
    <h1>Astro<h1/>
    <article set:html={markdown} />
  </body>
</html>

¡y listo! Como ha visto en este blog, podrá ver una representación visualmente atractiva de la adición y eliminación de código.

Cree y pruebe su aplicación Astro localmente

Para probar la aplicación, prepare una compilación y ejecute el servidor de vista previa usando el siguiente comando:

npm run build && npm run preview

Conclusión

En esta guía, aprendió cómo usar Transformers para Shiki en una aplicación Astro para enfocarse en líneas de código específicas y resaltar de una manera visualmente atractiva las adiciones y eliminaciones de código.

Si tiene alguna pregunta o comentario, no dude en comunicarse conmigo en Twitter