Changelog: 2021-05-24

Anchors

Added anchors to h3 using a logical OR, but the anchor is also applied applied to h4 - h6. This is fine but I don’t know why it’s happening.

In /utils/markdown-anchor I added h3 via a logical OR, originally it was only h2…

if (tokens[index].tag === 'h2' || 'h3') {
  return `<${
    tokens[index].tag
  } id="${slug}">`;
}
return `<${tokens[index].tag}>`;
};

And closing the tag…

if (tokens[index].tag === 'h2' || 'h3') {
  return ` <a class="${
    options.anchorClass
  }" href="#${slug}">
  <span class="visually-hidden">permalink</span>
  <span aria-hidden="true">#</span>
  </a></${tokens[index].tag}>`;
}
return `</${tokens[index].tag}>`;
};

Here it is in action…

Heading level 2

Heading level 3

Heading level 4

Heading level 5

Heading level 6

Just when I was feeling proud of figuring out how to add h3 and thought maybe I was starting to understand JavaScript!

Styles for headling level 4

Going to be using a good old h4 in an upcoming post and added spacing styles (and inadvertently anchors 😂).