Put footnotes in blog posts!

Hi all,

I wanted to be able to do footnotes on my blog, and I’ve gotten them working! On posts, at least. Footnotes won’t render on your main blog page, since it appears that write.as doesn’t run custom JavaScript on that part.

You need to have a Pro account, since this requires custom JavaScript. See below for details and the code.

Usage

I coded this using what I think is the standard Markdown format. For the reference in the body, just type: [^#] (where # is the number of your footnote). So for example:

This is some text.[^1]

Then at the bottom, where you want the reference to be, type: [#] Text of the reference. Here the # needs to be the same one as the note that references it. You can follow the [ ] with a colon or whatever else you want (or nothing). So you’d write the reference corresponding to the above example as:

[1] This is a reference to some text.

Features

  • Will create the footnote numbers as links, which will jump to the reference. The reference numbers will jump back to the note.

  • Should work with any number of footnotes or length of reference text. But note that they must be a single line. Multi-line references won’t apply any CSS to all of them. EDIT To clarify, I mean that you can’t specifically hit “enter” in the reference. If it wraps to a new line, that’s fine, and should work properly still.

  • References don’t have to be at the bottom of the document; the script should fix the text wherever it is.

Changing Appearance

The script creates three CSS classes that you can style via CSS. Note that the numbers will always be superscript, both in the body text and at the beginning of the reference. This is changeable, but there’s not really a good way to do superscript in CSS, especially in a way that wouldn’t break on some blog designs.

This should be straightforward enough if you’ve used CSS before, but drop me a line if you have trouble getting it to work.

  • .footnote: This is the number that appears in the body of the post. It’s a link, so the usual things like text-decoration and :hover are applicable.

  • .footnote-ref: This is the number that starts your reference at the bottom. It too is a link.

  • .footnote-ref-text: This is the text of the reference. Not a link.

To do

As it stands, you have to keep track of the numbers manually. I’m hoping to add some additional functionality to track the numbers automatically (so you don’t have to change them if you re-arrange the text later).

Let me know if something doesn’t work!

The Code

Just copy and paste this into the “Custom Javascript” box on your customization page.

// FOOTNOTE LINKS IN BODY TEXT
var notePattern = /\[\^(\d+)\]/g;
var noteText = "<a name=\"fn$1\"></a><sup><a class=\"footnote\" href=\"#fnref$1\">$1</a></sup>";

// REFERENCES AT THE BOTTOM
var refPattern = /\[(\d+)\](.*)/g;
var refText = "<a name=\"fnref$1\"></a><sup><a class=\"footnote-ref\" href=\"#fn$1\">$1</a></sup><span class=\"footnote-ref-text\">$2</span>";

var postContent = document.getElementById("post-body").innerHTML;
postContent = postContent.replace(notePattern, noteText);
postContent = postContent.replace(refPattern, refText);
document.getElementById("post-body").innerHTML = postContent;
10 Likes

This is brilliant. Great work! Just given it a whirl and it works very well.

As you say, if footnotes are shown on any excerpt or full post on your main homepages they don’t render, but they look great on the actual post.

Great! I’m glad it’s working.

Yeah, unfortunately the limitation regarding the main blog page is the nature of the platform, and isn’t something that we can script around. It’d only work if write.as ran our custom scripts on the blog page proper.

The CommonMark approach to footnotes, coming from PANDOC, and implemented in the cmark-gfm version of CommonMark (but not yet standardized) requires a colon in the reference definition:

... Foo[^1]...

[^1]: This is a footnote.
2 Likes

Okay, but as I said in my original post, that should work with this script.

I didn’t see any reason to require it, though. What distinguishes a footnote from its reference is the absence of the ^, since for some reason the form [^#]: does not display on write.as.

We are thinking more and more about how to incorporate extended Markdown syntax into Write.as beyond the MathJax implementation.

CommonMark and MultiMarkdown are being considered, so hopefully having footnotes via Markdown will be something coming up in the queue @ASilentDiplomat and @how.

5 Likes

Tried to use this script but wouldn’t display the reference text - lack of footnotes is a dealbreaker for me in a platform.

A post was merged into an existing topic: Markdown inconsistencies and markdown flavour

Hi @lss! Did you add the above code to the Custom JavaScript of your blog and use the following format in a post?

I will make a note here. [^1]

Footnotes:

[1] Here is the footnote

I am trying to think what could be getting in the way. Any common hangups you encountered when implementing this @ASilentDiplomat ?

Thanks - managed onto get the footnotes to work - was using [^2] [2]: note - with a colon - as opposed to [^3] [3] note - without the colon, which works

1 Like

That same thing very caught me up too. Glad you got it working now!

1 Like

@lss @cjeller1592 Glad you got it working! And yes, I had to leave out the colon in the note reference, because for some reason Write.as wouldn’t display anything with the format [number]: . Since this is a bit of a hack, we have to made do :slight_smile:

For any Drafts users, I just published a custom Action that accommodates this specific modification precisely.

(I got tired of having to do the conversion hehe.)

I’m a bit late to the party here but thanks for this! It’s exactly what I’ve wanted for a while. In my blog I made one tiny tweak to your JS which was to remove the superscript from the references at the bottom which looks a little nicer to me (I left them in the “In body text” section"

One thing I did notice is that the JS doesn’t seem to be called when I go to the top level of my blog, but only seems to work when viewing the blog post via its URL. Not sure why that is

Good to hear it! I don’t particularly want to self-host, but I really want CommonMark. I’d be happy to get feedback on the PR I submitted.

Honestly, footnotes might technically be an extended syntax and not a global one, but then also are codeblocks and they are practically standard. These should be implemented, probably in the [^1] ... [^1]: style.

1 Like

seeing a revival of an old but useful thread.
I know if they would work thanks to CommonMark and/or MultiMarkdown, and not the javascript stuff, I would use footnotes, so one more vote for implementing it in the future please. Thanks!

3 Likes

I believe footnotes would be very useful.

3 Likes

I’d need this too

1 Like

a friend recently implemented manual HTML footnotes. while this isn’t really a replacement due to the complexity of doing it, it’s still an option for people who really need footnotes.

In conclusion, I think some things.<a id="footnote-1-ref" href="#footnote-1" title="This is my first footnote.">[1]</a> But think otherwise about other things.<a id="footnote-2-ref" href="#footnote-2" title="This is my second footnote.">[2]</a>

<ol>
<li id="footnote-1">This is my first footnote.<a href="#footnote-1-ref">&#8617;</a></li>
<li id="footnote-2">This is my second footnote.<a href="#footnote-2-ref">&#8617;</a></li>
</ol>