diff options
| author | Danilo M. <danix@danix.xyz> | 2026-04-18 19:02:18 +0200 |
|---|---|---|
| committer | Danilo M. <danix@danix.xyz> | 2026-04-18 19:02:18 +0200 |
| commit | 17048ab79312f1752a296ab150984a4ef30aed5c (patch) | |
| tree | 732a7f1e6cf78d0d75e737848ad9328df7a8dd77 /themes/danix-xyz-hacker/layouts/_default/_markup | |
| parent | 46779476a570346661a2741607265caed42829b2 (diff) | |
| download | danixxyz-17048ab79312f1752a296ab150984a4ef30aed5c.tar.gz danixxyz-17048ab79312f1752a296ab150984a4ef30aed5c.zip | |
refactor: syntax highlighting with Catppuccin Macchiato and copy buttons
- 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>
Diffstat (limited to 'themes/danix-xyz-hacker/layouts/_default/_markup')
| -rw-r--r-- | themes/danix-xyz-hacker/layouts/_default/_markup/render-codeblock.html | 23 |
1 files changed, 23 insertions, 0 deletions
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> |