Move heading hash symbol after text and show on hover with animation

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: simonhamp

app/Support/CommonMark/HeadingRenderer.php

@@ -24,12 +24,12 @@ public function render(Node $node, ChildNodeRendererInterface $childRenderer)
 
         if ($node->getLevel() === 1 || $node->getLevel() === 2 || $node->getLevel() === 3) {
             $element->setContents(
+                $element->getContents().
                 new HtmlElement(
                     'a',
-                    ['href' => "#{$id}", 'class' => 'mr-2 no-underline font-medium', 'style' => 'border-bottom: 0 !important;'],
-                    new HtmlElement('span', ['class' => ' text-gray-600 dark:text-gray-400 hover:text-[#00aaa6]'], '#'),
-                ).
-                $element->getContents()
+                    ['href' => "#{$id}", 'class' => 'heading-anchor ml-2 no-underline font-medium', 'style' => 'border-bottom: 0 !important;'],
+                    new HtmlElement('span', ['class' => 'text-gray-600 dark:text-gray-400 hover:text-[#00aaa6]'], '#'),
+                )
             );
         }
 

resources/css/app.css

@@ -207,6 +207,18 @@ nav.docs-navigation li:has(.third-tier .exact-active) > .subsection-header {
 }
 
 /* Prose */
+.prose h1,
+.prose h2,
+.prose h3 {
+    & .heading-anchor {
+        @apply inline-block opacity-0 translate-x-[-4px] transition-all duration-200 ease-out;
+    }
+
+    &:hover .heading-anchor {
+        @apply opacity-100 translate-x-0;
+    }
+}
+
 .prose h1 {
     @apply text-2xl;
 }

resources/views/components/plugin-toc.blade.php

@@ -8,7 +8,7 @@
             const elements = article.querySelectorAll('h2[id], h3[id]')
             this.headings = Array.from(elements).map(el => ({
                 id: el.id,
-                text: el.textContent.replace(/^#\s*/, '').trim(),
+                text: el.textContent.replace(/\s*#$/, '').trim(),
                 level: parseInt(el.tagName.substring(1)),
             }))
         },

tests/Feature/HeadingRendererTest.php

@@ -0,0 +1,60 @@
+<?php
+
+namespace Tests\Feature;
+
+use App\Support\CommonMark\CommonMark;
+use Tests\TestCase;
+
+class HeadingRendererTest extends TestCase
+{
+    public function test_heading_hash_appears_after_text(): void
+    {
+        $html = CommonMark::convertToHtml('## My Heading');
+
+        $this->assertStringContainsString('My Heading<a', $html);
+        $this->assertStringNotContainsString('#</span></a>My Heading', $html);
+    }
+
+    public function test_heading_anchor_has_correct_class(): void
+    {
+        $html = CommonMark::convertToHtml('## Test Heading');
+
+        $this->assertStringContainsString('heading-anchor', $html);
+        $this->assertStringContainsString('ml-2', $html);
+    }
+
+    public function test_heading_has_id_attribute(): void
+    {
+        $html = CommonMark::convertToHtml('## My Section');
+
+        $this->assertStringContainsString('id="my-section"', $html);
+    }
+
+    public function test_heading_anchor_links_to_id(): void
+    {
+        $html = CommonMark::convertToHtml('## My Section');
+
+        $this->assertStringContainsString('href="#my-section"', $html);
+    }
+
+    public function test_h1_gets_anchor(): void
+    {
+        $html = CommonMark::convertToHtml('# Title');
+
+        $this->assertStringContainsString('heading-anchor', $html);
+    }
+
+    public function test_h3_gets_anchor(): void
+    {
+        $html = CommonMark::convertToHtml('### Sub Section');
+
+        $this->assertStringContainsString('heading-anchor', $html);
+    }
+
+    public function test_h4_does_not_get_anchor(): void
+    {
+        $html = CommonMark::convertToHtml('#### Deep Heading');
+
+        $this->assertStringNotContainsString('heading-anchor', $html);
+    }
+}