Adapt add-anchor-to-header-from-header-id to handle <hn><a></a></hn>

Now the hook creates a wrapping <span> to put the header and it's existing link
inside, and add the new anchor as a sibling.

2 files changed, 16 insertions, 4 deletions

diff --git a/_plugins/add-anchor-to-header-from-header-id.rb b/_plugins/add-anchor-to-header-from-header-id.rb
index 25829a2..d0df4d6 100644
--- a/_plugins/add-anchor-to-header-from-header-id.rb
+++ b/_plugins/add-anchor-to-header-from-header-id.rb
@@ -3,7 +3,7 @@ Jekyll::Hooks.register [:documents, :pages], :post_render do |doc|
     doc.output =
       doc.output.gsub(
         /<h([1-6])(.*?)id="([\w-]+)"(.*?)>(.*?)<\/h[1-6]>/,
-        '<a class="header-anchor" id="\3-header-anchor" href="#\3"><h\1\2id="\3"\4>\5<img class="simple-icon" src="/images/link.svg" aria-hidden="true" /></h\1></a>'
+        '<span class="header-anchor"><h\1\2id="\3"\4>\5</h\1><a href="#\3"><img class="simple-icon" src="/images/link.svg" aria-hidden="true" /></a></span>'
       )
   end
 end
diff --git a/styles.css b/styles.css
index 68444ae..97a3a0f 100644
--- a/styles.css
+++ b/styles.css
@@ -112,15 +112,27 @@ a.code-line-anchor:hover {
 
 /* Header anchor */
 
-a.header-anchor {
+span.header-anchor {
   color: black;
   text-decoration: none;
+  display: block;
+  margin-bottom: 15px;
 }
 
-a.header-anchor img {
+span.header-anchor h1,
+span.header-anchor h2,
+span.header-anchor h3,
+span.header-anchor h4,
+span.header-anchor h5,
+span.header-anchor h6 {
+  display: inline;
+}
+
+
+span.header-anchor img {
   visibility: hidden;
 }
 
-a.header-anchor:hover img {
+span.header-anchor:hover img {
   visibility: visible;
 }