Jekyll link within page

Question

I'm using Jekyll on Github, and I wonder whether there's a way to link to a section within a page. Say I have a section like

## Section 1 ##
section content 

and later in the same page I want to link to this section. I've found how to link to another page within the blog and do footnotes, but not this.

As a note, I use markdown: kramdown in my _config.yml

Answer 1

kramdown supports the automatic generation of header IDs if the option auto_ids is set to true (which is the default). This is done by converting the untransformed, i.e. plain, header text

So in the above example ## Section 1 ##, it would generate the following id: id="section-1", then the anchor is linked to via the A element:

<A href="#section-1">Section One</A>

Or in plain kramdown/markdown: [Section 1](#section-1)

Answer 2

It seems that this has been changed to #heading-section-1 (checking on Jekyll 3.7.3 right now).

As a way to figure this out on your own, you can inspect the element and see the id being used on the rendered page.

Answer 3

I found a nice repository that helps add anchors to all headers in three simple steps.

From docs:

1. Download the anchor_headings.html file from the master branch

2. Toss that file in your _includes folder

3. Where you typically would put {{ content }} in your layout, you would instead use this Liquid tag to output your page's content:

   {% include anchor_headings.html html=content anchorBody="#" %}

As result you will see:

Which is easy to customize.

Answer 4

If the section of the page you want to jump to is not a section heading, then this accepted answer didn't work for me. The following worked for me:

[jump](#final-solution)


<div id="final-solution"></div>