Add line numbers to code block

assets/css/highlight.css

@@ -6,22 +6,25 @@
   --light-red: #e06c75;
   --dark-red: #be5046;
   --comment-gray: #5c6370;
-  --green-light: #c678dd;
+  --dark-green: #3c2330;
+  --fucsia-light: #c678dd;
   --comment-color: var(--comment-gray);
   --string-color: var(--text-color);
   --variable-color: var(--light-yellow);
   --field-color: var(--light-yellow);
   --keyword-function-color: var(--text-color-accent);
-  --keyword-color: var(--green-light);
+  --keyword-color: var(--fucsia-light);
   --keyword-modifier-color: var(--light-red);
   --punctuation-bracket-color: var(--cyan);
   --type-color: var(--light-red);
   --variable-parameter-color: var(--blue);
   --function-call-color: var(--blue);
-  ---builtin-color: var(--green-light);
+  ---builtin-color: var(--fucsi-light);
   --operator-color: var(--light-red);
   --qualifier-color: var(--light-red);
   --attribute-color: var(--light-red);
+  --line-number-color: var(--dark-green);
+  --line-number-hover-color: var(--dark-yellow);
 }
 
 code .comment {
@@ -79,3 +82,32 @@ code.zig .qualifier {
 code.zig .attribute {
   color: var(--attribute-color);
 }
+
+.line-numbers-js {
+  /* Initialize CSS counter for each specific pre block */
+  counter-reset: line;
+}
+
+.line-numbers-js span.ln {
+  display: block;
+  line-height: 0;
+}
+
+.line-numbers-js span.ln:hover::before {
+  color: var(--line-number-hover-color);
+}
+
+.line-numbers-js span.ln::before {
+  /* Increment the 'line' counter for every span encountered */
+  counter-increment: line;
+  content: counter(line);
+  position: absolute;
+  right: 30px;
+  width: 20px;
+  text-align: right;
+  color: var(--line-number-color);
+
+  /* Prevent copying line number when selecting */
+  -webkit-user-select: none;
+  user-select: none;
+}

content/docs/architecture/command.smd

@@ -113,12 +113,13 @@ pub const goto_line_meta: Meta = .{ .arguments = &.{.integer} };
 and to actually receiving the integer parameter, `goto_line` will
 extract from the context like this:
 
-```zig
-pub fn goto_line(self: *Self, ctx: Context) Result {
-    var line: usize = 0;
-    if (!try ctx.args.match(.{tp.extract(&line)}))
-        return error.InvalidGotoLineArgument;
-```
+>[]($block.attrs('line-numbers-js'))
+>```zig
+>pub fn goto_line(self: *Self, ctx: Context) Result {
+>    var line: usize = 0;
+>    if (!try ctx.args.match(.{tp.extract(&line)}))
+>        return error.InvalidGotoLineArgument;
+>```
 
 To send a parameter to a command, make sure that the type is exactly
 the same when retrieving it. We will refer as encode and decode when
@@ -178,4 +179,4 @@ buffer and editor.
 
 * [Add tests](/docs/testing) to harden your code
 * [Sending parameters across](/docs/architecture/inner_data_exchange)
-* [Back to architecture](/docs/architecture)
+* [Back to architecture](/docs/architecture)

layouts/templates/base.shtml

@@ -23,6 +23,8 @@
       <ctx about="$site.page('community')"><a href="$ctx.about.link()"><i class="nf nf-fa-people_carry_box"></i></a> <a href="$ctx.about.link()">community</a></ctx>
     </nav>
     <script src="$site.asset('js/index.js').link()"></script>
+    <script src="$site.asset('js/highlight.js').link()"></script>
+	<script>document.addEventListener('DOMContentLoaded', addLineNumbersRobust);</script>
     <super>
   </body>
-</html>
+</html>