Question 410035 in Html Question posted in
Some basic documentation can be found here.

Html – 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!

Tags:

2

Answers


  1. 0

    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.

    Login or Signup to reply.
  2. 0

    To add a pilcrow (¶) icon beside headers in a custom Jekyll theme, which allows users to create a link to that specific header, follow the steps below. This feature is commonly referred to as a "header link" and is used on many documentation sites.

    The following guide will explain how to implement this function within your Jekyll template.

        <script>
  document.addEventListener("DOMContentLoaded", function() {
    // Select all header elements
    var headings = document.querySelectorAll("h1, h2, h3, h4, h5, h6");

    headings.forEach(function(heading) {
      if (heading.id) {
        // Create a link for the pilcrow icon
        var anchor = document.createElement("a");
        anchor.setAttribute("href", "#" + heading.id);
        anchor.setAttribute("class", "header-link");
        anchor.innerHTML = "¶";

        // Insert the link at the end of the header
        heading.appendChild(anchor);
      }
    });
  });
</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search