<h1>Add bookmark links to headings</h1>
<p>
  Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iure veritatis
  expedita id. Reprehenderit cum in exercitationem tempore, a rem
  praesentium iusto nam ducimus tempora totam minus, fuga, reiciendis
  necessitatibus quisquam!
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quis,
  alias inventore distinctio laboriosam, quisquam nemo excepturi ipsum
  necessitatibus quia, iusto illum cupiditate eius corporis labore provident
  dignissimos? Iste, dignissimos.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quis,
  alias inventore distinctio laboriosam, quisquam nemo excepturi ipsum
  necessitatibus quia, iusto illum cupiditate eius corporis labore provident
  dignissimos? Iste, dignissimos.
</p>
<h2>First heading 2</h2>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil fugit,
  distinctio ex incidunt sint sed unde, perferendis, quos modi nulla dolore
  cumque delectus doloremque ab repudiandae earum nemo in adipisci.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quis,
  alias inventore distinctio laboriosam, quisquam nemo excepturi ipsum
  necessitatibus quia, iusto illum cupiditate eius corporis labore provident
  dignissimos? Iste, dignissimos.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quis,
  alias inventore distinctio laboriosam, quisquam nemo excepturi ipsum
  necessitatibus quia, iusto illum cupiditate eius corporis labore provident
  dignissimos? Iste, dignissimos.
</p>
<h3>A heading 3</h3>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates harum
  ipsum, expedita et reprehenderit error asperiores repudiandae aspernatur
  eum optio. Illo unde odit, inventore praesentium et quia voluptatum
  cupiditate similique?
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quis,
  alias inventore distinctio laboriosam, quisquam nemo excepturi ipsum
  necessitatibus quia, iusto illum cupiditate eius corporis labore provident
  dignissimos? Iste, dignissimos.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quis,
  alias inventore distinctio laboriosam, quisquam nemo excepturi ipsum
  necessitatibus quia, iusto illum cupiditate eius corporis labore provident
  dignissimos? Iste, dignissimos.
</p>
<h2>Second heading 2</h2>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil fugit,
  distinctio ex incidunt sint sed unde, perferendis, quos modi nulla dolore
  cumque delectus doloremque ab repudiandae earum nemo in adipisci.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quis,
  alias inventore distinctio laboriosam, quisquam nemo excepturi ipsum
  necessitatibus quia, iusto illum cupiditate eius corporis labore provident
  dignissimos? Iste, dignissimos.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quis,
  alias inventore distinctio laboriosam, quisquam nemo excepturi ipsum
  necessitatibus quia, iusto illum cupiditate eius corporis labore provident
  dignissimos? Iste, dignissimos.
</p>
<h3>Heading 3 again</h3>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates harum
  ipsum, expedita et reprehenderit error asperiores repudiandae aspernatur
  eum optio. Illo unde odit, inventore praesentium et quia voluptatum
  cupiditate similique?
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quis,
  alias inventore distinctio laboriosam, quisquam nemo excepturi ipsum
  necessitatibus quia, iusto illum cupiditate eius corporis labore provident
  dignissimos? Iste, dignissimos.
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quis,
  alias inventore distinctio laboriosam, quisquam nemo excepturi ipsum
  necessitatibus quia, iusto illum cupiditate eius corporis labore provident
  dignissimos? Iste, dignissimos.
</p>
<h4>Heading 4</h4>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates harum
  ipsum, expedita et reprehenderit error asperiores repudiandae aspernatur
  eum optio. Illo unde odit, inventore praesentium et quia voluptatum
  cupiditate similique?
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quis,
  alias inventore distinctio laboriosam, quisquam nemo excepturi ipsum
  necessitatibus quia, iusto illum cupiditate eius corporis labore provident
  dignissimos? Iste, dignissimos.
</p>
<h5>Heading 5</h5>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates harum
  ipsum, expedita et reprehenderit error asperiores repudiandae aspernatur
  eum optio. Illo unde odit, inventore praesentium et quia voluptatum
  cupiditate similique?
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quis,
  alias inventore distinctio laboriosam, quisquam nemo excepturi ipsum
  necessitatibus quia, iusto illum cupiditate eius corporis labore provident
  dignissimos? Iste, dignissimos.
</p>
<h6>Heading 6</h6>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptates harum
  ipsum, expedita et reprehenderit error asperiores repudiandae aspernatur
  eum optio. Illo unde odit, inventore praesentium et quia voluptatum
  cupiditate similique?
</p>
<p>
  Lorem ipsum dolor sit amet consectetur adipisicing elit. Accusantium quis,
  alias inventore distinctio laboriosam, quisquam nemo excepturi ipsum
  necessitatibus quia, iusto illum cupiditate eius corporis labore provident
  dignissimos? Iste, dignissimos.
</p>
@import url("https://fonts.googleapis.com/css2?family=Merriweather:wght@700&family=Poppins&display=swap");

body {
  margin: 0 auto;
  max-width: 600px;
  font-family: Poppins, sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: Merriweather, serif;
  font-weight: bold;
}

:is(h2, h3, h4, h5, h6) a {
  padding-left: 0.25rem;
  text-decoration: none;
  color: #767676;
  padding: 0 0.25em;
  transition: color 0.2s ease-in-out;
}

:is(h2, h3, h4, h5, h6) a:hover {
  color: rgb(27, 27, 252);
}
let headings = document.querySelectorAll("h2, h3, h4, h5, h6");

// we do this to exclude the text fragment
const currentURL = `${window.location.protocol}//${window.location.host}${window.location.pathname}`;

headings.forEach((heading) => {
  let slug = slugify(heading.innerText);
  heading.setAttribute("id", slug);

  const bookmarkLink = document.createElement("a");
  bookmarkLink.innerText = "#";
  bookmarkLink.setAttribute("href", `${currentURL}#${slug}`);
  heading.append(bookmarkLink);
});

/**
 * Produces a slug from the text provided that can be used as an URL fragment. Does it the same as GitHub.
 *
 * @param {string} text - The text to slugify
 * @returns {string} The slug.
 */
function slugify(text) {
  // Anything that is an unwanted punctuation character
  const PUNCTUATION_REGEXP = /[^\p{L}\p{M}\p{N}\p{Pc}\- ]/gu;

  let slug = text.trim().toLowerCase();
  slug = slug.replace(PUNCTUATION_REGEXP, "").replace(/ /g, "-");
  return slug;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.