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
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)
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.
I found an alternative that works on my current jekyll static site
## My Subsection {#my-subsection} This is some content in the subsection. [Link to the subsection](#my-subsection) hope it helps.
I found a nice repository that helps add anchors to all headers in three simple steps.
From docs:
Download the anchor_headings.html file from the master branch
Toss that file in your _includes folder
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.
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> If you put {: #your-id-name} on the line underneath anything then it'll make an id for that element and you can link to it.
e.g. a paragraph:
This is some nice text.
{: #my-nice-text}
Will be rendered as:
<p id="my-nice-text">This is some nice text.</p> So you could link to it with link
