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 1/2] 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>

From f96ccbcb1f657e98225354522a2e4e9b3b2852fa Mon Sep 17 00:00:00 2001
From: David Karlsson <35727626+dvdksn@users.noreply.github.com>
Date: Fri, 13 Oct 2023 20:29:10 +0200
Subject: [PATCH 2/2] chore: document standard code var syntax

Signed-off-by: David Karlsson <35727626+dvdksn@users.noreply.github.com>
---
 content/contribute/components/code-blocks.md | 14 +++++++++++++-
 1 file changed, 13 insertions(+), 1 deletion(-)

diff --git a/content/contribute/components/code-blocks.md b/content/contribute/components/code-blocks.md
index ee4b135318..8a1abdccc0 100644
--- a/content/contribute/components/code-blocks.md
+++ b/content/contribute/components/code-blocks.md
@@ -8,6 +8,18 @@ Rouge provides lots of different code block "hints". If you leave off the hint,
 it tries to guess and sometimes gets it wrong. These are just a few hints that
 we use often.
 
+## Variables
+
+If your example contains a placeholder value that's subject to change,
+use the format `<[A-Z_]+>` for the placeholder value: `<MY_VARIABLE>`
+
+```none
+export name=<MY_NAME>
+```
+
+This syntax is reserved for variable names, and will cause the variable to
+be rendered in a special color and font style.
+
 ## Bash
 
 Use the `bash` language code block when you want to show a Bash script:
@@ -157,4 +169,4 @@ authorizedkeys:
     - AUTHORIZED_KEYS=ssh-rsa AAAAB3Nsomelongsshkeystringhereu9UzQbVKy9o00NqXa5jkmZ9Yd0BJBjFmb3WwUR8sJWZVTPFL
   volumes:
     /root:/user:rw
-```
\ No newline at end of file
+```