From 17048ab79312f1752a296ab150984a4ef30aed5c Mon Sep 17 00:00:00 2001
From: "Danilo M." <danix@danix.xyz>
Date: Sat, 18 Apr 2026 19:02:18 +0200
Subject: refactor: syntax highlighting with Catppuccin Macchiato and copy
 buttons
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add [markup.highlight] config: noClasses=false for CSS class output, lineNos=true with lineNumbersInTable=true for proper line number rendering
- Create render-codeblock.html render hook to intercept fenced code blocks and wrap with header bar (language label + copy button)
- Replace chroma-custom.css entirely with Catppuccin Macchiato palette (dark theme) + Catppuccin Latte (light theme), with full token color mapping
- Create code-copy.js: copy-to-clipboard logic with language pretty-name map (bash→Shell, js→JavaScript, etc.), icon swap (copy→check for 2s), and aria-live region for screen reader announcement (WCAG 4.1.3)
- Update baseof.html to load code-copy.js on page kind with Hugo Pipes
- WCAG AA compliance: line number contrast fixed to ~3.5:1 (--ctp-overlay0), light theme copy button color to 4.1:1 (#6c6f85), focus outline 6.21:1 (--ctp-lavender), screen reader announcements via aria-live

All code blocks now render with: syntax highlighting (noClasses=true fixed), line numbers with proper table layout, language label in header, copy button with feather icons, both dark and light theme support.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
---
 .../layouts/_default/_markup/render-codeblock.html | 23 ++++++++++++++++++++++
 1 file changed, 23 insertions(+)
 create mode 100644 themes/danix-xyz-hacker/layouts/_default/_markup/render-codeblock.html

(limited to 'themes/danix-xyz-hacker/layouts/_default/_markup/render-codeblock.html')

diff --git a/themes/danix-xyz-hacker/layouts/_default/_markup/render-codeblock.html b/themes/danix-xyz-hacker/layouts/_default/_markup/render-codeblock.html
new file mode 100644
index 0000000..813c389
--- /dev/null
+++ b/themes/danix-xyz-hacker/layouts/_default/_markup/render-codeblock.html
@@ -0,0 +1,23 @@
+{{- $lang := .Type -}}
+{{- $hasLang := gt (len $lang) 0 -}}
+{{- $highlightLang := $lang -}}
+{{- if not $hasLang -}}{{- $highlightLang = "text" -}}{{- end -}}
+{{- $opts := dict "lineNos" true "lineNumbersInTable" true -}}
+
+<div class="code-block-wrapper">
+  {{- if $hasLang -}}
+  <div class="code-header" data-lang="{{ $lang }}">
+    <span class="code-lang-label">{{ $lang }}</span>
+    <div class="code-copy-wrapper">
+      <span role="status" aria-live="polite" class="sr-only code-copy-status"></span>
+      <button class="code-copy-btn" aria-label="Copy code" data-copy-target>
+        <i data-feather="copy" aria-hidden="true"></i>
+        <i data-feather="check" aria-hidden="true" class="hidden"></i>
+      </button>
+    </div>
+  </div>
+  {{- end -}}
+  <div class="code-body">
+    {{ highlight .Inner $highlightLang $opts }}
+  </div>
+</div>
-- 
cgit v1.2.3