From 0dc7b15fcf5c256454dd5e92932551c108c14129 Mon Sep 17 00:00:00 2001
From: Edwin Noorlander <edwin@noorlander.info>
Date: Tue, 28 Jul 2026 14:37:14 +0200
Subject: [PATCH] Fix guide deep links, code block styling

- Move heading IDs from hidden permalink anchors to parent headings so deep links scroll correctly (admin.php)
- Change code block background from dark to light gray (guide.php)
- Add pre/code CSS to frontend layout.mustache for visible code blocks
---
 admin/templates/pages/guide.php |  5 +++--
 cms/templates/layout.mustache   | 24 ++++++++++++++++++++++++
 public/admin.php                |  8 ++++++++
 3 files changed, 35 insertions(+), 2 deletions(-)

diff --git a/admin/templates/pages/guide.php b/admin/templates/pages/guide.php
index 7eb7166..d3eae88 100644
--- a/admin/templates/pages/guide.php
+++ b/admin/templates/pages/guide.php
@@ -16,8 +16,9 @@
 <style>
 .guide-content h2 { margin-top: 1.5rem; }
 .guide-content h3 { margin-top: 1.25rem; }
-.guide-content pre { background: #f4f4f4; padding: 1rem; border-radius: 4px; overflow-x: auto; }
-.guide-content code { background: #f0f0f0; padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.9em; }
+.guide-content pre { background: #f8f9fa; padding: 1rem; border-radius: 6px; overflow-x: auto; border: 1px solid #dee2e6; margin-bottom: 1rem; }
+.guide-content pre code { background: none; padding: 0; color: #333; font-size: 0.85rem; line-height: 1.5; }
+.guide-content code { background: #e8e8e8; padding: 0.15rem 0.4rem; border-radius: 3px; font-size: 0.9em; color: #d63384; }
 .guide-content table { width: 100%; margin-bottom: 1rem; }
 .guide-content table th, .guide-content table td { padding: 0.5rem; border: 1px solid #dee2e6; }
 .guide-content blockquote { border-left: 3px solid #ccc; padding-left: 1rem; color: #666; margin-left: 0; }
diff --git a/cms/templates/layout.mustache b/cms/templates/layout.mustache
index 3292392..4a9e5a3 100644
--- a/cms/templates/layout.mustache
+++ b/cms/templates/layout.mustache
@@ -379,6 +379,30 @@
             }
         }
         
+        /* Code block styling */
+        pre {
+            background: #f8f9fa;
+            padding: 1rem;
+            border-radius: 6px;
+            overflow-x: auto;
+            border: 1px solid #dee2e6;
+            margin-bottom: 1rem;
+        }
+        pre code {
+            background: none;
+            padding: 0;
+            color: #333;
+            font-size: 0.85rem;
+            line-height: 1.5;
+        }
+        code {
+            background: #e8e8e8;
+            padding: 0.15rem 0.4rem;
+            border-radius: 3px;
+            font-size: 0.9em;
+            color: #d63384;
+        }
+
         /* Footer icon hover effects */
         .footer-icon {
             color: #6c757d;
diff --git a/public/admin.php b/public/admin.php
index 23b6a6b..eca4bbb 100644
--- a/public/admin.php
+++ b/public/admin.php
@@ -1417,6 +1417,14 @@ function handleGuide(AdminAuth $auth, array $config): void
         $environment->addExtension(new \League\CommonMark\Extension\HeadingPermalink\HeadingPermalinkExtension());
         $converter = new \League\CommonMark\MarkdownConverter($environment);
         $content = $converter->convert($rawContent)->getContent();
+
+        // Move IDs from heading-permalink anchors to their parent headings
+        // so deep links scroll to the heading element itself (not a hidden anchor)
+        $content = preg_replace(
+            '~<h(\d)>(.*?)<a id="([^"]+)"[^>]*></a></h\1>~s',
+            '<h\1 id="\3">\2</h\1>',
+            $content
+        );
     } else {
         $content = '<pre>' . htmlspecialchars($rawContent) . '</pre>';
     }