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 liketext-decorationand:hoverare 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;