Add anchor links to headers

[tarleb]

Anchor links next to headers can make it easier and more pleasant to link to certain sections in an HTML document. As an example, GitHub does this by showing a small link next to a heading when hovering.

This could be done with a Lua filter and a little bit of CSS. Untested PoC:

function Header (h)
  if h.identifier ~= '' then
    h.content:insert(1, pandoc.Link({pandoc.Str '🔗'}, h.identifier), '', {class = 'anchor-link'})
    return h
  end
end

.anchor-link {
  position: relative;
  left: -1em;
  display: hidden;
}

h1:hover > .anchor-link, h2:hover > .anchor-link, h3:hover > .anchor-link {
  display: inline-block;
}

CC @cderv who came up with the idea.

[jgm]

I'm in favor, if you want to do a PR!

[jgm]

Actually, not sure about this. note that currently you can click on a heading and the address bar will update with the fragment. So, all you need to do is click the heading and copy the URL in the top bar. Is the additional convenience of anchor links enough to justify the complexity?

[tarleb]

Clicking a heading doesn't seem to work for me in the manual. Should this be working there, or is it on certain pages only?

[jgm]

Oh, you're right; it's only if you go there via the TOC.
Well, let's do the header anchors then.