[SOLVED] How do I create a Document Fragment for my Jekyll theme?

How do I create a Document Fragment for my Jekyll theme?

How do I replicate the little ¶ pilcrow icon next to the header, that creates a link to the header.

Heres an example of what I mean: https://squidfunk.github.io/mkdocs-material/getting-started/

On the headings, there is a ¶ pilcrow that you can click. When you click it, it will bring you down to that heading, and create a link for it. This can be seen on most other documentation websites as well.

I want to have that feature with the pilcrow icon, but I am not sure how to replicate it, as I am using a custom Jekyll theme. Any and all help is appreciated, thanks!

Solution

You can inspect the HTML source code of that page with your browser's dev tools. What you'll find will be basically the following CSS and HTML:

.anchor {
  display: none;
}
h3:hover > .anchor {
  display: inline;
}

<h3 id="my-title">
  My title
  <a class="anchor" href="#my-title" aria-hidden="true">¶</a>
</h3>

If you have a typical Jekyll page, your HTML will be generated by its kramdown markdown engine. The markdown for above HTML would look as follows:

### My title [¶](#my-title){:.anchor}

Alternatively, you can use something like this automatic transform.