es blog: rewrite zig series pt 5 and add shiki transformers

astro.config.mjs

@@ -1,16 +1,31 @@
 import { defineConfig } from 'astro/config';
 import tailwind from "@astrojs/tailwind";
 import mdx from "@astrojs/mdx";
+import {
+    transformerNotationDiff,
+    transformerNotationFocus,
+    transformerMetaHighlight,
+    transformerNotationHighlight,
+    transformerNotationErrorLevel,
+} from '@shikijs/transformers'
 
 // https://astro.build/config
 export default defineConfig({
-  integrations: [tailwind(), mdx()],
+    integrations: [tailwind(), mdx()],
-  markdown: {
+    markdown: {
-    shikiConfig: {
+        shikiConfig: {
-      themes: {
+            themes: {
-        light: "catppuccin-latte",
+                light: "catppuccin-latte",
-        dark: "github-dark"
+                dark: "dark-plus"
-      }
+            },
+            transformers: [
+                transformerNotationDiff(),
+                transformerNotationFocus(),
+                transformerMetaHighlight(),
+                transformerNotationHighlight(),
+                transformerNotationErrorLevel(),
+            ],
+            defaultColor: false,
+        }
     }
-  }
 });

public/blog.css

@@ -6,7 +6,7 @@
 }
 
 pre.astro-code {
-    padding: 1rem;
+    padding-top: 1rem;
     border-radius: 0.5rem;
     border: solid 1px var(--c-border-1);
     font-size: 0.8rem;
@@ -74,11 +74,13 @@ pre.astro-code>code .line::before {
 }
 
 @media (prefers-color-scheme: dark) {
+    .astro-code {
+        background-color: var(--shiki-dark-bg) !important;
+    }
 
     .astro-code,
     .astro-code span {
         color: var(--shiki-dark) !important;
-        background-color: var(--shiki-dark-bg) !important;
         /* Optional, if you also want font styles */
         font-style: var(--shiki-dark-font-style) !important;
         font-weight: var(--shiki-dark-font-weight) !important;
@@ -94,3 +96,63 @@ pre.astro-code>code .line::before {
 #isso-thread input {
     color: black;
 }
+
+/* Shiki transformers */
+.astro-code {
+    --shiki-highlight-color: #cccccc;
+    --shiki-error-bg-color: rgba(244, 63, 63, 0.25);
+}
+
+@media (prefers-color-scheme: dark) {
+    .astro-code {
+        --shiki-highlight-color: #343434;
+        --shiki-error-bg-color: rgba(244, 63, 94, 0.16);
+    }
+}
+
+.line {
+    display: inline-block;
+    width: 100%;
+}
+
+.line.highlighted:not(.error) {
+    background-color: var(--shiki-highlight-color) !important;
+}
+
+.line.highlighted.error {
+    background-color: var(--shiki-error-bg-color) !important;
+}
+
+
+
+.line_
+
+.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:not(.focused) {
+    filter: blur(0.08rem);
+    transition: filter linear 250ms;
+}
+
+.has-focused:hover .line:not(.focuser) {
+    filter: none;
+}
+

public/global.css

@@ -9,21 +9,21 @@
 }
 
 @font-face {
-	font-family: 'Iosevka Fixed Web';
+    font-family: 'Iosevka Fixed Web';
-	font-display: swap;
+    font-display: swap;
-	font-weight: 700;
+    font-weight: 700;
-	font-stretch: normal;
+    font-stretch: normal;
-	font-style: normal;
+    font-style: normal;
-	src: url('/Iosevka/Bold.woff2') format('woff2');
+    src: url('/Iosevka/Bold.woff2') format('woff2');
 }
 
 @font-face {
-	font-family: 'Iosevka Etoile Web';
+    font-family: 'Iosevka Etoile Web';
-	font-display: swap;
+    font-display: swap;
-	font-weight: 900;
+    font-weight: 900;
-	font-stretch: normal;
+    font-stretch: normal;
-	font-style: normal;
+    font-style: normal;
-	src: url('/IosevkaEtoile/Heavy.woff2') format('woff2');
+    src: url('/IosevkaEtoile/Heavy.woff2') format('woff2');
 }
 
 /* Iosevka from Xe Iaso: https://xeiaso.net/ https://github.com/Xe/iosevka  */

src/pages/blog/es/programacion-03.md

@@ -25,7 +25,7 @@ funcionan igual en Windows 11.
 ## Descargar e instalar VSCode
 
 Si sabes como instalar un programa y no necesitas instrucciones
-paso a paso, saltate esta sección.
+paso a paso, saltate esta sección y [ve a la siguiente sección](#introducción-a-vscode).
 
 Primero busca `VSCode` en Google, y entra a la primera página que
 sale.

src/pages/blog/es/programacion-05.md

@@ -20,41 +20,63 @@ modificarlo y entender algunos otros conceptos.
 Hola mundo es tradicionalmente el [primer programa](https://es.wikipedia.org/wiki/Hola_mundo)
 que se escribe cuando se aprende a programar.
 
-Vamos a empezar con este programa. Entra a la siguiente página web:
+Abre VSCode y abre el proyecto que creaste en el artículo anterior.
-[https://zig.fly.dev/p/xNluereqmgW](https://zig.fly.dev/p/xNluereqmgW)
 
-Veras lo siguiente:
+Allí, abre el archivo `src/main.zig`.
 
-![Zig online 1](/img/blog/es/tutorial/007-zig1.jpg)
+![VSCode](/img/blog/es/tutorial/063-zig.jpg)
 
-Arriba está el nombre de la página: "Zig Playground". A su derecha hay 3 botones en inglés:
+A partir de ahora vamos a trabajar en ese único archivo.
 
-- "Run" ejecuta el programa.
+Verás un montón de código raro:
-- "Format" hace algo llamado 'formatear' el código. No lo usaremos aún.
-- "Share" comparte el código que escribimos. No lo usaremos.
 
-Dentro del recuadro plomo está escrito el código **Zig**. No lo modifiques aún.
+![VSCode](/img/blog/es/tutorial/078-zig.jpg)
 
-Si lo modificaste y quieres volver al código original, cierra la página y vuelve a
+Vamos a eliminar todo y escribir desde cero.
-abrirla con el link de arriba.
 
-## Ejecutando el código
 
-Presiona el boton "Run". Aparecerá texto debajo del recuadro del código:
+## Hola mundo
 
-![Zig online 2](/img/blog/es/tutorial/008-zig.png)
+El primer programa siempre es el más fácil. Vas a escribirlo
+(o copiar y pegar) y ejecutarlo.
 
-Este texto es el resultado de ejecutar el programa. Se lee:
+Borra todo el contenido del archivo `src/main.zig` y
+coloca lo siguiente:
 
-- `Hola mundo!` : Este es el resultado del programa.
+```zig
-- `Program exited.` : Significa "El programa terminó" en ingles. Nos 
+const std = @import("std");
-    indica que el programa terminó de ejecutarse. Puedes ignorarlo.
 
-Felicidades! Has ejecutado tu primer programa.
+pub fn main() !void {
+    std.debug.print("Hola mundo!\n", .{});
+}
+```
 
-> Desafio: Borra todo el código y vuelve a escribirlo, exactamente igual.
+Entra a `src/main.zig` y reemplaza todo el código que está ahí
-    Utiliza la imágen como guía.
+por el código de arriba.
 
+> Nota: Puede que notes que las imágenes no sean exáctamente
+    iguales a como cuando tu escribas el código.
+    No te preocupes, no es un problema.
+
+Una vez que hayas modificado el código, verás un punto blanco arriba:
+
+![VSCode](/img/blog/es/tutorial/080-zig.jpg)
+
+Esto significa que el archivo está modificado, pero no guardado.
+Presiona `Control + S` para guardar el archivo.
+
+Ahora, ejecuta el código: Ve al terminal y ejecuta el comando
+`zig build run`:
+
+> Nota: Verás que mi terminal se ve diferente. Pero lo importante
+    son los comandos, y el resultado.
+
+![VSCode](/img/blog/es/tutorial/081-zig.jpg)
+
+El resultado sale abajo: `Hola mundo!`.
+
+
+¡Ejecutaste tu primer programa!
 
 ## ¿Qué significan todas estas letras?
 
@@ -66,59 +88,44 @@ Así como el francés, árabe o coreano, el **lenguaje** de programación Zig
 tiene un conjunto de reglas. Aprenderemos las reglas a medida que avance
 el tiempo. Mientras tanto, puedes ignorar todas esas palabras.
 
-> ¿Que pasa si eliminas alguna de esas palabras y ejecutas el programa 
-    (con el boton "Run")? ¿Qué mensaje obtienes? ¿Qué crees que significa?
 
-
+## Magia negra
-## Magia negra y abstracción
-
-Según [Significados.com](https://www.significados.com/abstracto/),
-abstracto significa vago, impreciso, teórico, que no tiene existencia
-física (entre otras cosas). Algo abstracto suele ser algo difícil
-de entender, o imaginario.
-
-
-En programación, abstracto tiene otro significado. Puedes buscar su
-definición técnica en internet, pero me parece muy confusa para
-un principiante, así que lo explicare en mis términos.
-
-En programación, abstracto significa que sabemos **qué** hace, pero
-no **cómo** lo hace. Un ejemplo claro sería un auto. Sabemos que
-al pisar el acelerador, el auto avanza. Pero no sabemos **cómo**
-pisar el acelerador ocasiona que el combustible se transforme en
-energía cinemática.
-
-Por ejemplo, voy a hablar más adelante de "imprimir" en el programa.
-Imprimir significa mostrar un mensaje en la pantalla. Sin embargo,
-no te voy a explicar cómo funciona la impresión. El concepto de
-"imprimir" es abstracto.
-
-### Magia negra
 
 Escuché este termino del canal de Youtube Imesi.net. Magia negra
-es algo que: no se qué hace, cómo funciona, ni tampoco me importa.
+es algo que: no se cómo funciona, ni tampoco me importa.
+Solo me importa lo que hace.
 
 Voy a utilizar el término "magia negra" para referirme a algo
 por lo que no necesitas preocuparte, o intentar entender. Por
-ejemplo, en el código de más arriba:
+ejemplo, en el codigo que escribiste y ejecutaste,
+todo lo de rojo es magia negra:
 
-![Zig online 1](/img/blog/es/tutorial/007-zig1.jpg)
-
-Todo el texto que dice:
 
 ```zig
-const std = @import("std")
+const std = @import("std"); // [!code error:3]
 
-pub fn main() {
+pub fn main() !void {
-    std.debug.print();
+    std.debug.print("Hola mundo!\n", .{});
+} // [!code error]
+```
+
+Todo lo de rojo tiene un significado, pero aun no necesitamos
+saber cuál es. Pero es importante que este ahí, tal como está
+escrito.
+
+Lo que nosotros vamos a escribir es lo de "adentro":
+
+```zig
+const std = @import("std");
+
+pub fn main() !void {
+    std.debug.print("Hola mundo!\n", .{}); // [!code focus] // [!code highlight]
 }
 ```
 
-es magia negra. Funciona, hace algo, pero no importa. No te
+Y a medida que aprendamos conceptos nuevos, descifraremos
-preocupes en intentar entenderlo.
+qué significan todas esas cosas.
 
-Eventualmente, y a medida que aprendas conceptos nuevos,
-entenderas qué significan esas cosas.
 
 
 ## Inglés