diff --git a/astro.config.mjs b/astro.config.mjs index b9fb9be..27f8f91 100644 --- a/astro.config.mjs +++ b/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, } diff --git a/public/blog.css b/public/blog.css index 14aadca..7bc05d7 100644 --- a/public/blog.css +++ b/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_ diff --git a/src/pages/blog/es/programacion-05.md b/src/pages/blog/es/programacion-05.md index e68e161..615a1ad 100644 --- a/src/pages/blog/es/programacion-05.md +++ b/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: diff --git a/src/pages/blog/es/programacion-07.md b/src/pages/blog/es/programacion-07.md index 89535cf..77705e7 100644 --- a/src/pages/blog/es/programacion-07.md +++ b/src/pages/blog/es/programacion-07.md @@ -20,8 +20,8 @@ formatos. El código para imprimir texto tiene dos partes: ```zig -// --- 1 --- -2- -std.debug.print("formato", .{}); + // --- 1 --- -2- + 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` diff --git a/src/pages/blog/es/programacion-08.md b/src/pages/blog/es/programacion-08.md index 71763ff..7d49368 100644 --- a/src/pages/blog/es/programacion-08.md +++ b/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}); diff --git a/src/pages/blog/es/programacion-09.md b/src/pages/blog/es/programacion-09.md index 9aa0c56..b1c3a34 100644 --- a/src/pages/blog/es/programacion-09.md +++ b/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 -medio de una linea con código, pero no -es recomendable. +También puedes escribir un comentario al final +de una linea con código, pero no 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