---
title: "Uso de Transformers para Shiki para enriquecer el resaltado de sintaxis en Astro"
description: "¿Cómo integrar transformadores comunes para que Shiki enriquezca el resaltado de sintaxis en la aplicación Astro?"
source: "https://www.launchfa.st/es/blog/shiki"
author: "Rishi Raj Jain"
created_at: 2024-04-17T00:00:00.000Z
---
> **Site index for agents**
> Fetch https://www.launchfa.st/llms.txt to discover every page on this site.
> Every page is also available as Markdown by appending `.md` to its URL.
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](https://nodejs.org/en/blog/announcements/v20-release-announce) o posterior
## Tabla de contenido
- [Crear una nueva aplicación Astro](#crea-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](#instalar-transformers-para-shiki)
- [Cargar transformadores para Shiki en configuración Astro](#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:
```bash
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:
```bash
cd my-app
npm run dev
```
La aplicación debería estar ejecutándose en [localhost:4321](http://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:
```bash
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
```tsx {2-6,9-19}
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:
```markdown
---
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`:
```astro {12-39}
---
// File: src/pages/index.astro // [!code focus]
---
// [!code focus]
Astro
Astro
```
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:
```astro {4,5,46}
---
// File: src/pages/index.astro // [!code focus]
const blogData = await Astro.glob('../content/blog/sample.md') // [!code focus]
const markdown = await blogData[0].compiledContent()
---
Astro
Astro
```
¡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:
```bash
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](https://twitter.com/direct_messages/create/rishi_raj_jain_)
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](https://nodejs.org/en/blog/announcements/v20-release-announce) o posterior
## Tabla de contenido
- [Crear una nueva aplicación Astro](#crea-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](#instalar-transformers-para-shiki)
- [Cargar transformadores para Shiki en configuración Astro](#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:
```bash
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:
```bash
cd my-app
npm run dev
```
La aplicación debería estar ejecutándose en [localhost:4321](http://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:
```bash
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
```tsx {2-6,9-19}
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:
```markdown
---
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`:
```astro {12-39}
---
// File: src/pages/index.astro // [!code focus]
---
// [!code focus]