Heads up! This blog post hasn't been updated in over 2 years. CodePen is an ever changing place, so if this post references features, you're probably better off checking the docs. Get in touch with support if you have further questions.

JEEZ WELCOME TO 2016 CODEPEN.

Now, like any well-presented written content on the web, Posts on CodePen have anchor links on all headers. You know, jump-down hash-links that allow you to link right to a section of a Post, if you need to.

Like this:

If you’re interested in this kind of thing for your own project, we chose to do it client-side and using jQuery, which we already had available:

(function() {

  function slugify(text) {
    return text.toString().toLowerCase().trim()
      .replace(/\s+/g, '-') // Replace spaces with -
      .replace(/&/g, '-and-') // Replace & with 'and'
      .replace(/[^\w\-]+/g, '') // Remove all non-word chars
      .replace(/\-\-+/g, '-'); // Replace multiple - with single -
  }

  var $headers = $(".post-body :header");

  $headers.each(function(index) {

    var $el = $(this);

    var idToLink = slugify($el.text()) + '-' + index;

    var $headerLink = $("<a />", {
      html: "#",
      class: "article-headline-link",
      href: "#" + idToLink,
      id: idToLink
    });

    $el.prepend($headerLink);

  });

}());