From f7bbe06d2742c20759281c884335fe0b7f362ca2 Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Fri, 13 Oct 2023 20:17:16 +0200
Subject: [PATCH] feat: special rendering for codeblock variables

This change adds special rendering for variables in codeblocks.
Variables (placeholder values in examples subject to change)
can be denoted using the following syntax:

    <VARIABLE_NAME>

Using this format will render the variable in a special color, and
without the angle brackets, akin to:

    \033[95mVARIABLE_NAME\033[39m

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 layouts/_default/_markup/render-codeblock.html | 17 +++++++++++++----
 1 file changed, 13 insertions(+), 4 deletions(-)

diff --git a/layouts/_default/_markup/render-codeblock.html b/layouts/_default/_markup/render-codeblock.html
index 75709aab44..2fa0fa14f1 100644
--- a/layouts/_default/_markup/render-codeblock.html
+++ b/layouts/_default/_markup/render-codeblock.html
@@ -1,13 +1,22 @@
-<div class="group relative">
+{{ $innerHTML := highlight .Inner .Type
+| replaceRE
+  `&lt;([A-Z_]+)?&gt;`
+  `<var
+    class="text-violet-light dark:text-violet-dark font-bold"
+    >$1</var>`
+}}
+
+<div x-data class="group relative">
   <button
-    x-data="{ code: '{{ strings.ReplaceRE `(?sm)^\$\s+` "" .Inner | base64Encode }}' }"
     class="material-symbols-rounded hidden group-hover:block absolute top-3 right-3 text-gray-light-300 dark:text-gray-dark-600"
     title="Copy"
-    @click="window.navigator.clipboard.writeText(atob(code));
+    @click="window.navigator.clipboard.writeText($refs.code.textContent.replaceAll(/^\$\s*/gm, ''));
     $el.textContent='check_circle';
     setTimeout(() => $el.textContent='content_copy', 2000);"
   >
     content_copy
   </button>
-  {{ highlight .Inner .Type }}
+  <div x-ref="code">
+  {{- safeHTML $innerHTML  -}}
+  </div>
 </div>