Automatically generate anchor tags for all headings?

[kortina]

Is it possible to configure jekyll so that all headings are assigned anchor tags? Eg,

### Some Heading

would yield

<a name="some-heading"></a><h3>Some Heading</h3>

If this is not a feature, do you think this is something that jekyll users would want and be open to seeing an implementation submitted as a pull request?

[troyswanson]

Some of the Markdown processors already do this. The only one I know for sure that does it is Redcarpet, but I'm sure there are other ones that do it as well.

[parkr]

This would have to be done in the markdown processor, or in a post-render hook that parsed the html output and inserted nodes where needed. Kramdown offers the former, nothing that I know of does the latter.

I don't think we'd want the latter for core.

The JS we use on jekyllrb.com is here http://blog.parkermoore.de/2014/08/01/header-anchor-links-in-vanilla-javascript-for-github-pages-and-jekyll/

[kortina]

Great, thank you.

[kleinfreund]

@kortina kramdown is capable of doing so, but I disabled it (which means it’s on by default):

kramdown:
  # Enable GitHub Flavored Markdown (fenced code blocks)
  input: GFM
  # Disable auto-generated ID's for headings
  auto_ids: false

However as far as I remember correctly, this added ID’s, not name’s.

[bryanbraun]

Some markdown processors (like kramdown & redcarpet) can generate IDs but they typically don't add the anchor icon into your html. There are a few small javascript utilities that can add the anchors also, like AnchorJS (which I wrote) and the jQuery-based anchorific.js.

[reinink]

Going off @parkr's suggestion, you can do something similar with some jQuery:

$('.h2,h3,h4,h5,h6').filter('[id]').each(function () {
    $(this).html('<a href="#'+$(this).attr('id')+'">' + $(this).text() + '</a>');
});