theme: Create code block render hook

content/en/functions/collections/Where.md

@@ -213,7 +213,7 @@ With TOML, date values are first-class citizens. TOML has a date data type while
 
 In the TOML example below, note that the event date is not quoted.
 
-{{< code file="content/events/2024-user-conference.md" >}}
+{{< code file=content/events/2024-user-conference.md >}}
 +++
 title = '2024 User Conference"
 eventDate = 2024-04-01

content/en/functions/go-template/return.md

@@ -27,7 +27,7 @@ Unlike `return` statements in other languages, Hugo executes the first occurrenc
 
 By way of example, let's create a partial template that _renders_ HTML, describing whether the given number is odd or even:
 
-{{< code file="layouts/partials/odd-or-even.html" >}}
+{{< code file=layouts/partials/odd-or-even.html >}}
 {{ if math.ModBool . 2 }}
   <p>{{ . }} is even</p>
 {{ else }}
@@ -43,7 +43,7 @@ When called, the partial renders HTML:
 
 Instead of rendering HTML, let's create a partial that _returns_ a boolean value, reporting whether the given number is even:
 
-{{< code file="layouts/partials/is-even.html" >}}
+{{< code file=layouts/partials/is-even.html >}}
 {{ return math.ModBool . 2 }}
 {{< /code >}}
 
@@ -78,7 +78,7 @@ A partial that returns a value must contain only one `return` statement, placed
 
 For example:
 
-{{< code file="layouts/partials/is-even.html" >}}
+{{< code file=layouts/partials/is-even.html >}}
 {{ $result := false }}
 {{ if math.ModBool . 2 }}
   {{ $result = "even" }}
@@ -92,7 +92,7 @@ For example:
 The construct below is incorrect; it contains more than one `return` statement.
 {{< /note >}}
 
-{{< code file="layouts/partials/do-not-do-this.html" >}}
+{{< code file=layouts/partials/do-not-do-this.html >}}
 {{ if math.ModBool . 2 }}
   {{ return "even" }}
 {{ else }}

content/en/functions/transform/XMLEscape.md

@@ -32,7 +32,7 @@ For example:
 
 When using `transform.XMLEscape` in a template rendered by Go's [html/template] package, declare the string to be safe HTML to avoid double escaping. For example, in an RSS template:
 
-{{< code file="layouts/_default/rss.xml" >}}
+{{< code file=layouts/_default/rss.xml >}}
 <description>{{ .Summary | transform.XMLEscape | safeHTML }}</description>
 {{< /code >}}
 

hugo.toml

@@ -62,9 +62,10 @@ disableAliases = true
             [markup.goldmark.parser.attribute]
                 block = true
     [markup.highlight]
-        noClasses    = false
+        lineNumbersInTable = false
-        style        = 'solarized-dark'
+        noClasses          = false
-        wrapperClass = 'highlight not-prose'
+        style              = 'solarized-dark'
+        wrapperClass       = 'highlight not-prose'
 
 [mediaTypes]
     [mediaTypes."text/netlify"]

layouts/_default/_markup/render-codeblock.html

@@ -0,0 +1,65 @@
+{{/* prettier-ignore-start */}}
+{{/*
+Renders a highlighted code block using the given options and attributes.
+
+In addition to the options available to the transform.Highlight function, you
+may also specify the following parameters:
+
+@param {bool} [copy=false] Whether to display a copy-to-clipboard button.
+@param {string} [file] The file name to display above the rendered code.
+
+@returns {template.HTML}
+
+@examples
+
+    ```go
+    fmt.Println("Hello world!")
+    ```
+
+    ```go {linenos=true copy=true file="layouts/index.html"}
+    fmt.Println("Hello world!")
+    ```
+*/}}
+{{/* prettier-ignore-end */}}
+
+{{- $copy := false }}
+{{- $file := or .Attributes.file "" }}
+{{- $ext := strings.TrimPrefix "." (path.Ext $file) }}
+{{- $lang := or .Type $ext "text" }}
+{{- if eq $lang "html" }}
+  {{- $lang = "go-html-template" }}
+{{- end }}
+
+{{- with .Attributes.copy }}
+  {{- if in (slice true "true" 1) . }}
+    {{- $copy = true }}
+  {{- else if in (slice false "false" 0) . }}
+    {{- $copy = false }}
+  {{- end }}
+{{- end }}
+
+
+<div
+  x-data
+  class="render-hook-codeblock font-mono not-prose relative mt-6 mb-8 border-1 border-gray-200 dark:border-gray-800 bg-light dark:bg-dark">
+  {{- $fileSelectClass := "select-none" }}
+  {{- if $copy }}
+    {{- $fileSelectClass = "select-text" }}
+    <svg
+      class="absolute right-3 top-2 z-30 text-blue-600 hover:text-blue-500 dark:text-gray-400 dark:hover:text-gray-300 cursor-pointer w-6 h-6"
+      @click="$copy($refs.code)">
+      <use href="#icon--copy"></use>
+    </svg>
+  {{- end }}
+  {{- with $file }}
+    <div
+      class="san-serif text-sm inline-block leading-none pl-2 py-3 bg-gray-300 dark:bg-slate-700 w-full {{ $fileSelectClass }}
+">
+      {{ . }}
+    </div>
+  {{- end }}
+
+  <div x-ref="code">
+    {{- transform.Highlight (strings.TrimSpace .Inner) $lang .Options }}
+  </div>
+</div>