Fix multiple markdown posts with footnotes problem (with jQuery)


(Jump to the solution)

If, like me, you use the occasional footnote in blog posts which you generated with Markdown, you might have encountered an annoying problem. If you have several posts on a page, and they all have footnotes, all footnote links will lead back to the first post’s footnotes.

This is because MultiMarkdown strips whatever unique identifier your footnotes have in the original when it converts to HTML.

There were 3 possible solutions to this problem (that I could see.)

  1. Fork MultiMarkdown and take out the part which simplifies all the footnote IDs into fn1, fn2 etc.

  2. Change the HTML after it had been generated, by running it through a service or script.

  3. Change it on the fly using jQuery.

I chose the latter, as it didn’t involve extra steps when publishing a blog post, nor did it involve some crappy short-lived fork of MultiMarkdown.

My solution adds the ID of the post element to each footnote (and reverse footnote link) in that post. So instead of the basic footnote id you get “article-519ac59ae4b005a0d6f3aeb0:1”. Which is a good deal more unique.

This works out of the box for Squarespace, but you could easily adapt it assuming whatever system you use for your blog has some kind of element surrounding each post which has a unique ID. Just change article to whatever element you want to match.

Here’s the code. Feel free to let me know if you have any improvements or questions. I’ve purposefully left it in several lines so that it’s easier to adapt if needs be.

Step 1: Include jQuery in your header

You can do this using Code Injection in Squarespace.

<code><script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
</code>

Step 2: Include this code in your header

Also insert the code found here into the header of your site.

That’s it!


Hosting the script elsewhere because it kept changing itself on the page…