Merge pull request #18425 from dvdksn/code-var-syntax

feat: code var syntax

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
-```
+```

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>