Added anchor links to admonition blocks for direct referencing (JuliaDocs#2676)

Author: Rahban1

CHANGELOG.md

@@ -5,6 +5,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+### Changed
+
+* Added anchor links to admonition blocks, making it possible to create direct links to specific admonitions. ([#2505], [#2676])
 ## Fixed
 
 * `@meta`, `@setup`, and `@docs` blocks no longer generate spurious entries in the search index. ([#1929], [#2675])

assets/html/scss/documenter/components/_admonition.scss

@@ -94,6 +94,30 @@ $admonition-border-color: () !default;
     // fa-circle-exclamation
     content: "\f06a";
   }
+
+  .admonition-anchor {
+    opacity: 0;
+    margin-left: 0.5em;
+    font-size: 0.75em;
+    color: inherit;
+    text-decoration: none;
+    transition: opacity 0.2s ease-in-out;
+    
+    &:before {
+      @include font-awesome;
+      // fa-link
+      content: "\f0c1";
+    }
+    
+    &:hover {
+      opacity: 1 !important;
+      text-decoration: none;
+    }
+  }
+  
+  &:hover .admonition-anchor {
+    opacity: 0.8;
+  }
 }
 
 details.admonition.is-details > .admonition-header {

assets/html/themes/catppuccin-frappe.css

@@ -2393,16 +2393,24 @@ function domify(dctx::DCtx, node::Node, a::MarkdownAST.Admonition)
             # apply a class
             isempty(cat_sanitized) ? "" : ".is-category-$(cat_sanitized)"
         end
-
+    node_repr = sprint(io -> show(io, node))
+    content_hash = bytes2hex(SHA.sha1(node_repr))[1:8]
+    admonition_id = if !isempty(a.title)
+        base_id = Documenter.slugify(a.title)
+        "$(base_id)-$(content_hash)"
+    else
+        "$(a.category)-$(content_hash)"
+    end
+    anchor_link = DOM.Tag(:a)[".admonition-anchor", :href => "#$(admonition_id)", :title => "Permalink"]()
     inner_div = div[".admonition-body"](domify(dctx, node.children))
     if a.category == "details"
         # details admonitions are rendered as <details><summary> blocks
-        return details[".admonition.is-details"](
-            summary[".admonition-header"](a.title), inner_div
+        return details[".admonition.is-details", :id => admonition_id](
+            summary[".admonition-header"](a.title, anchor_link), inner_div
         )
     else
-        return div[".admonition$(colorclass)"](
-            header[".admonition-header"](a.title), inner_div
+        return div[".admonition$(colorclass)", :id => admonition_id](
+            header[".admonition-header"](a.title, anchor_link), inner_div
         )
     end
 end