es blog: add shiki transformers

astro.config.mjs

@@ -7,6 +7,7 @@ import {
     transformerMetaHighlight,
     transformerNotationHighlight,
     transformerNotationErrorLevel,
+    transformerNotationWordHighlight,
 } from '@shikijs/transformers'
 
 // https://astro.build/config
@@ -24,6 +25,7 @@ export default defineConfig({
                 transformerMetaHighlight(),
                 transformerNotationHighlight(),
                 transformerNotationErrorLevel(),
+                transformerNotationWordHighlight(),
             ],
             defaultColor: false,
         }

public/blog.css

@@ -81,10 +81,6 @@ pre.astro-code>code .line::before {
     .astro-code,
     .astro-code span {
         color: var(--shiki-dark) !important;
-        /* Optional, if you also want font styles */
-        font-style: var(--shiki-dark-font-style) !important;
-        font-weight: var(--shiki-dark-font-weight) !important;
-        text-decoration: var(--shiki-dark-text-decoration) !important;
     }
 }
 
@@ -100,12 +96,14 @@ pre.astro-code>code .line::before {
 /* Shiki transformers */
 .astro-code {
     --shiki-highlight-color: #cccccc;
+    --shiki-highlight-word-color: #aaaaaa;
     --shiki-error-bg-color: rgba(244, 63, 63, 0.25);
 }
 
 @media (prefers-color-scheme: dark) {
     .astro-code {
         --shiki-highlight-color: #343434;
+        --shiki-highlight-word-color: #3a3a3a;
         --shiki-error-bg-color: rgba(244, 63, 94, 0.16);
     }
 }
@@ -123,7 +121,12 @@ pre.astro-code>code .line::before {
     background-color: var(--shiki-error-bg-color) !important;
 }
 
-
+.line .highlighted-word {
+    border: 1px solid var(--shiki-highlight-word-color);
+    border-radius: 0.25rem;
+    padding: 1px 3px;
+    margin: -1px -1px;
+}
 
 .line_
 

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

@@ -55,7 +55,7 @@ Entra a `src/main.zig` y reemplaza todo el código que está ahí
 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.
+    iguales a como cuando 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:

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

@@ -20,8 +20,8 @@ formatos.
 El código para imprimir texto tiene dos partes:
 
 ```zig
-//              --- 1 ---  -2-
+    //              --- 1 ---  -2-
-std.debug.print("formato", .{});
+    std.debug.print("formato", .{});
 ```
 
 - 1: un formato (string)
@@ -69,7 +69,7 @@ saber que se pueden utilizar.
 const std = @import("zig");
 
 pub fn main() !void {
-    const nombre = "Juan";
+    const nombre = "Juan"; // [!code focus:4]
     const apellido = "Perez";
     std.debug.print("{s} {s}", .{nombre, apellido});
     // Imprime: `Juan Perez`

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

@@ -29,7 +29,7 @@ Digamos que la persona se llama `Juan`. El código es así:
 const std = @import("std");
 
 pub fn main() !void {
-    std.debug.print("Hola {s}\n", .{"Juan"});
+    std.debug.print("Hola {s}\n", .{"Juan"}); // [!code focus:3]
     std.debug.print("Tu pedido cuesta {s} dolares\n", .{"20"});
     std.debug.print("Adios {s}\n", .{"Juan"});
 }
@@ -47,7 +47,7 @@ Entonces tendríamos que repetirlo 10 veces.
 const std = @import("std");
 
 pub fn main() !void {
-    std.debug.print("Hola {s}\n", .{"Juan"});
+    std.debug.print("Hola {s}\n", .{"Juan"}); // [!code focus:10]
     std.debug.print("Hola {s}\n", .{"Juan"});
     std.debug.print("Hola {s}\n", .{"Juan"});
     std.debug.print("Hola {s}\n", .{"Juan"});
@@ -86,10 +86,10 @@ y a partir de ese momento cada vez que usemos
 Por ejemplo:
 
 ```zig
-const std = @import("std");
+const std = @import("std"); // [!code word:nombre]
 
 pub fn main() !void {
-    const nombre = "Juan";
+    const nombre = "Juan"; // [!code focus:2] // [!code highlight]
     std.debug.print("Hola {s}\n", .{nombre});
 }
 ```
@@ -108,10 +108,10 @@ Podemos utilizar la variable las veces que queramos.
 Si imprimimos 10 veces se vería así:
 
 ```zig
-const std = @import("std");
+const std = @import("std"); // [!code word:nombre]
 
 pub fn main() !void {
-    const nombre = "Juan";
+    const nombre = "Juan"; // [!code focus:11]
     std.debug.print("Hola {s}\n", .{nombre});
     std.debug.print("Hola {s}\n", .{nombre});
     std.debug.print("Hola {s}\n", .{nombre});
@@ -133,10 +133,10 @@ Ahora, si queremos cambiar `Juan` por `Maria`,
 solo tenemos que hacerlo en un lugar:
 
 ```zig
-const std = @import("std");
+const std = @import("std"); // [!code word:nombre]
 
 pub fn main() !void {
-    const nombre = "Maria";
+    const nombre = "Maria"; // [!code focus:11]
     std.debug.print("Hola {s}\n", .{nombre});
     std.debug.print("Hola {s}\n", .{nombre});
     std.debug.print("Hola {s}\n", .{nombre});

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

@@ -31,9 +31,11 @@ y terminan cuando acaba la linea.
 
 
 ```zig
-// Este es un comentario
+const std = @import("std");
+
+// Este es un comentario // [!code highlight]
 pub fn main() !void {
-    // Este también es un comentario
+    // Este también es un comentario // [!code highlight]
     std.debug.print("Hola", .{});
 }
 ```
@@ -45,20 +47,23 @@ Si quieres un comentario que abarque varias lineas,
 cada linea debe iniciar con doble slash:
 
 ```zig
+const std = @import("std");
+
 pub fn main() !void {
-    // Este es un comentario
+    // Este es un comentario // [!code highlight:3] // [!code focus:4]
     // que ocupa 3 lineas
     // de texto :D
     std.debug.print("Hola", .{});
 }
 ```
 
-También puedes escribir un comentario en
+También puedes escribir un comentario al final
-medio de una linea con código, pero no
+de una linea con código, pero no es recomendable.
-es recomendable.
 
 ```zig
-pub fn main() !void {  // Este es un comentario
+const std = @import("std");
+
+pub fn main() !void {  // Este es un comentario al final
     std.debug.print("Hola", .{}); // Este también
 }
 ```
@@ -84,7 +89,7 @@ es el siguiente:
 const std = @import("std");
 
 pub fn main() !void {
-    std.debug.print("{d}", .{322});
+    std.debug.print("{d}", .{322}); // [!code focus] // [!code highlight]
 }
 ```
 
@@ -107,7 +112,7 @@ También podemos utilizar números en variables:
 const std = @import("std");
 
 pub fn main() !void {
-    const edad = 32;
+    const edad = 32; // [!code focus:3] // [!code highlight]
     // Imprime: `Tengo 32 años`
     std.debug.print("Tengo {d} años", .{edad});
 }
@@ -155,14 +160,14 @@ refiera a los números enteros.
 Ahora que sabemos cómo crear números (int), podemos hacer
 operaciones con ellos.
 
-Zig soporta las operaciones que conoces: suma `+`,
+Zig ofrece las operaciones que conoces: suma `+`,
 resta `-`, multiplicación `*` y división `/`.
 
 ```zig
 const std = @import("std");
 
 pub fn main() !void {
-    const r1 = 9 + 3;   // 12
+    const r1 = 9 + 3;   // 12 // [!code focus:7]
     const r2 = 9 - 3;   // 6
     const r1 = 9 * 3;   // 27
     const r1 = 9 / 3;   // 3