Heading Links

I decided to add heading links. They are very useful when trying to explain to someone what specific section of an article you refer to.

For inspiration, I took a look at this approach and this other one.

I decided to use the pilcrow symbol ‘¶’ - it’s used in the Django Docs.

Find below the snippet (appended to the end of _layouts/post.html):

<script>
  document
    .querySelector('.post-content')
    .querySelectorAll('h1,h2,h3,h4,h5,h6')
    .forEach(function(heading) {
      if (heading.id) {
        var pilcrowLink = document.createElement('a');
        pilcrowLink.href = '#' + heading.id;
        pilcrowLink.innerHTML = '¶';
        // Style the anchor tag
        pilcrowLink.style.fontSize = '0.7em';
        pilcrowLink.style.marginLeft = '0.5em';
        pilcrowLink.style.position = 'relative';
        pilcrowLink.style.top = '-0.4em';
        heading.appendChild(pilcrowLink);
      }
    });
</script>

This is a Title example