# Put footnotes in blog posts!

**URL:** <https://discuss.write.as/t/put-footnotes-in-blog-posts/762>\
**Category:** Customization\
**Created:** [August 7, 2019, 3:51pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762 "2019-08-07T15:51:49Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![ASilentDiplomat](https://discuss.write.as/letter_avatar_proxy/v4/letter/a/eb9ed0/32.png) [@ASilentDiplomat](https://discuss.write.as/u/ASilentDiplomat)\
**Post date:** [August 7, 2019, 3:51pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/1 "2019-08-07T15:51:50Z")

</div>

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;

```

---

<div class="post-metadata">

**Author:** ![digitalgyoza](https://discuss.write.as/letter_avatar_proxy/v4/letter/d/ecc23a/32.png) [@digitalgyoza](https://discuss.write.as/u/digitalgyoza)\
**Post date:** [August 8, 2019, 12:52pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/2 "2019-08-08T12:52:01Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![ASilentDiplomat](https://discuss.write.as/letter_avatar_proxy/v4/letter/a/eb9ed0/32.png) [@ASilentDiplomat](https://discuss.write.as/u/ASilentDiplomat)\
**Post date:** [August 9, 2019, 4:19pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/3 "2019-08-09T16:19:29Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![how](https://discuss.write.as/user_avatar/discuss.write.as/how/32/362_2.png) [@how](https://discuss.write.as/u/how)\
**Post date:** [October 2, 2019, 9:57am UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/4 "2019-10-02T09:57:54Z")

</div>

> [@ASilentDiplomat](#):
>
> [1] This is a reference to some text.

The CommonMark approach to footnotes, coming from [PANDOC](http://pandoc.org/MANUAL.html#footnotes), and implemented in the cmark-gfm version of CommonMark (but not yet standardized) **requires a colon in the reference definition** :

```markdown
... Foo[^1]...

[^1]: This is a footnote.

```

---

<div class="post-metadata">

**Author:** ![ASilentDiplomat](https://discuss.write.as/letter_avatar_proxy/v4/letter/a/eb9ed0/32.png) [@ASilentDiplomat](https://discuss.write.as/u/ASilentDiplomat)\
**Post date:** [October 2, 2019, 1:20pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/5 "2019-10-02T13:20:22Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![cjeller1592](https://discuss.write.as/user_avatar/discuss.write.as/cjeller1592/32/128_2.png) [@cjeller1592](https://discuss.write.as/u/cjeller1592)\
**Post date:** [October 2, 2019, 1:38pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/6 "2019-10-02T13:38:41Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![lss](https://discuss.write.as/letter_avatar_proxy/v4/letter/l/278dde/32.png) [@lss](https://discuss.write.as/u/lss)\
**Post date:** [December 3, 2019, 1:28pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/7 "2019-12-03T13:28:08Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cjeller1592](https://discuss.write.as/user_avatar/discuss.write.as/cjeller1592/32/128_2.png) [@cjeller1592](https://discuss.write.as/u/cjeller1592)\
**Post date:** [December 3, 2019, 6:56pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/8 "2019-12-03T18:56:16Z")

</div>

A post was merged into an existing topic: [Markdown inconsistencies and markdown flavour](https://discuss.write.as/t/markdown-inconsistencies-and-markdown-flavour/750/8)

---

<div class="post-metadata">

**Author:** ![cjeller1592](https://discuss.write.as/user_avatar/discuss.write.as/cjeller1592/32/128_2.png) [@cjeller1592](https://discuss.write.as/u/cjeller1592)\
**Post date:** [December 3, 2019, 7:14pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/9 "2019-12-03T19:14:51Z")

</div>

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

```auto
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 ?

---

<div class="post-metadata">

**Author:** ![lss](https://discuss.write.as/letter_avatar_proxy/v4/letter/l/278dde/32.png) [@lss](https://discuss.write.as/u/lss)\
**Post date:** [December 3, 2019, 8:31pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/10 "2019-12-03T20:31:26Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![cjeller1592](https://discuss.write.as/user_avatar/discuss.write.as/cjeller1592/32/128_2.png) [@cjeller1592](https://discuss.write.as/u/cjeller1592)\
**Post date:** [December 3, 2019, 10:01pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/11 "2019-12-03T22:01:02Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![ASilentDiplomat](https://discuss.write.as/letter_avatar_proxy/v4/letter/a/eb9ed0/32.png) [@ASilentDiplomat](https://discuss.write.as/u/ASilentDiplomat)\
**Post date:** [December 4, 2019, 4:39pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/12 "2019-12-04T16:39:31Z")

</div>

@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 🙂

---

<div class="post-metadata">

**Author:** ![DavidBlue](https://discuss.write.as/user_avatar/discuss.write.as/davidblue/32/258_2.png) [@DavidBlue](https://discuss.write.as/u/DavidBlue)\
**Post date:** [September 14, 2021, 9:10am UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/13 "2021-09-14T09:10:18Z")

</div>

For any Drafts users, I just published [**a custom Action**](https://actions.getdrafts.com/a/1q9) that accommodates this specific modification precisely.

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

---

<div class="post-metadata">

**Author:** ![cornelius](https://discuss.write.as/user_avatar/discuss.write.as/cornelius/32/2633_2.png) [@cornelius](https://discuss.write.as/u/cornelius)\
**Post date:** [January 16, 2023, 3:27am UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/15 "2023-01-16T03:27:51Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![meta](https://discuss.write.as/user_avatar/discuss.write.as/meta/32/1485_2.png) [@meta](https://discuss.write.as/u/meta)\
**Post date:** [January 21, 2023, 4:37pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/16 "2023-01-21T16:37:47Z")

</div>

> [@cjeller1592](#):
>
> CommonMark and MultiMarkdown are being considered

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.

---

<div class="post-metadata">

**Author:** ![talya](https://discuss.write.as/user_avatar/discuss.write.as/talya/32/3316_2.png) [@talya](https://discuss.write.as/u/talya)\
**Post date:** [April 21, 2023, 10:01pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/17 "2023-04-21T22:01:49Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![writeprivacy](https://discuss.write.as/letter_avatar_proxy/v4/letter/w/e0b2c6/32.png) [@writeprivacy](https://discuss.write.as/u/writeprivacy)\
**Post date:** [April 23, 2023, 1:49pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/18 "2023-04-23T13:49:18Z")

</div>

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!

---

<div class="post-metadata">

**Author:** ![mnml](https://discuss.write.as/user_avatar/discuss.write.as/mnml/32/2895_2.png) [@mnml](https://discuss.write.as/u/mnml)\
**Post date:** [April 23, 2023, 3:01pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/19 "2023-04-23T15:01:28Z")

</div>

I believe footnotes would be very useful.

---

<div class="post-metadata">

**Author:** ![pabloscloud](https://discuss.write.as/user_avatar/discuss.write.as/pabloscloud/32/2875_2.png) [@pabloscloud](https://discuss.write.as/u/pabloscloud)\
**Post date:** [April 26, 2023, 6:54pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/20 "2023-04-26T18:54:24Z")

</div>

I’d need this too

---

<div class="post-metadata">

**Author:** ![talya](https://discuss.write.as/user_avatar/discuss.write.as/talya/32/3316_2.png) [@talya](https://discuss.write.as/u/talya)\
**Post date:** [November 3, 2023, 5:16pm UTC](https://discuss.write.as/t/put-footnotes-in-blog-posts/762/21 "2023-11-03T17:16:59Z")

</div>

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>`