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

Black Friday: Enjoy a 25% discount on the starter kits. Use code BLACKFRIDAY2024 at checkout.

LaunchFast Logo LaunchFast

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

Rishi Raj Jain
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

Sponsored AICardify - AI-generated greeting cards

Generate AI Powered Greeting Cards For Every Occasion

Requisitos previos

Necesitará lo siguiente:

Tabla de contenido

Crea una nueva aplicación Astro

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

Terminal window
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
  • cuando se le pregunte si planea escribir Typecript
  • Estricto cuando se le pregunta qué tan estricto debe ser Typecript.
  • cuando se le solicita instalar dependencias
  • cuando se le solicita inicializar un repositorio de git

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

Terminal window
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:

Terminal window
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:

Terminal window
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

Learn More Autenticación de Benutzern en Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung
Autenticación de Benutzern en Astro mit besserer Authentifizierung: Eine Schritt-für-Schritt-Anleitung November 24, 2024
Astro vs.Next.js: Auswahl de los mejores frameworks en enero de 2024
Astro vs.Next.js: Auswahl de los mejores frameworks en enero de 2024 October 30, 2024
6 funciones diferentes, el kit de inicio web completo incluye todas las funciones
6 funciones diferentes, el kit de inicio web completo incluye todas las funciones October 26, 2024