There's been so many times that I've wished I could quickly link to a specific headline in an article, but there's no id attributes on the tag...so I can't.

But then there's nothing I can do to fix it, because it actually requires the blog author to overhaul their site to add ids to all the heading tags which may not be a quick job.

So, my dear blog author, here's my work around until you do serve ids in your headings.

Proudly sponsored by
CodeSponsor.io- get paid by adding one line of code to your README

JavaScript to generated permalinks

We're going to add a single JavaScript file that will crawl through all our heading elements, and convert the text of the heading into an id.

Then, if there's a hash fragment in the URL, the window will jump down to the named element. Thus "faking" permalink support.

The id

The id attribute is only applied if there's no id on the heading element and is simply a regular expression that strips away anything that isn't an alphanumeric and converts it to lowercase.

So a heading that reads: "What does a Pro account get you?" is converted to whatdoesaproaccountgetyou. Pretty simple.

Exposing the link

Inspired by Github's readme permalinks, when you hover near the left of the title then you'll see a ¶ character that is clickable and gives the reader the permalink.

This style is injected via the JavaScript, and it's quite possible you'll need to tweak it a little to get it style correctly on your own site (but it's pretty small).

Usage

Simple. Download the script. Then just slap the script in the footer of your site (or after all your heading tags) and it'll upgrade your headings for your visitors:

<script src="js/permalink.js"></script>

Now I can share headline specific links to your site whilst all you needed to do was add one line. Thank you!

Want more?

Posts, web development learnings & insights, exclusive workshop and training discounts and more, direct to your inbox.

I won't send you any spam, and you can unsubscribe at any time. Powered by ConvertKit