Footnote support in editor

Did anyone try the following extension?

2 Likes

Not me. I’m using Bigfoot.

2 Likes

I experienced the same problem with using footnotes without writing the whole post in markdown.
Together with a friend, I created a script which allows you to set footnotes. Your visitors can jump between a note like “[1]” inside the post to the explanation and the end of the page and back.

I created a very detailed README for the repo.
Feel free to check it out:

2 Likes

This looks promising, can it be used without modifying any Ghost core files?
I’m a Ghost pro user, so the only thing I can modify is the theme!

1 Like

Of course, no modifying of core required — what is required is adding the JS file(s) and CSS file(s) to your theme. That being said, you’ll probably have to customise its CSS if you want things to fit perfectly. As well, seeing how this isn’t a plug-in you’ll have to manually apply every Bigfoot footnote with HTML cards. Tedious, but it does look real nice :wink:

1 Like

I guess this is one of the downfalls of having a system that isn’t user-extensible. Of course that’s not reason enough alone to switch to another platform. Ghost has many great reasons for people to use it. I do hope that as part of the 4.0 there is some sort of extension system, although I wouldn’t want it to be as wild-west as ahem Wordpress, for example.

It does seem though that in this matter (footnotes) the Ghost dev team are either obtuse or just don’t care that they have taken away a really useful feature.

3 Likes
  • +1 for any footnote developments or workarounds :pray:t4:
  • footnotes are a critical component in publishing :writing_hand:t4:
6 Likes

I’m using a german keyboard and german layout. So what you suggested does not work.

Pressing shift + ^ symbol would result in a °

Just pressing ^ does add another ^ next to it the moment you hit another key (any other key btw).

So it does not work great… it does not work at all.

1 Like

Yeah… actually I got the confirmation via support chat. Some things (including subscript and superscript) are just not working for users without a US English keyboard layout (on macOS … don’t know about windows or other platforms). For example a German one which has / adds “dead keys” after typing ^ or ~ (strangely ` works fine in markdown mode).

Looking at the entries and “solutions” in this forum as well as GitHub (eg. here and here) does not make me very confident that this issue es taken serious / considered important by the devs or product management.

One workaround would be to just write everything in markdown and switching your keyboard to US English layout (use the “US English Layout”, not the “(US) English International Layout” if you are on macOS as that one has the dead keys as well).

So these are my findings after spending at least an hour on this issue experimenting and chatting with support. Unsatisfied with the result but maybe it helps someone else…

4 Likes

Is it possible to link directly to a footnote? To date, I’ve just been using the [1]^ trick and linking each footnote generically to the Literature Cited Section. I would prefer to be able to link to individual citations in the Literature Cited section. I’m not sure if this is possible as I thought it was only possible to link directly to article sections? Thanks for any help.


  1. 1 ↩︎

1 Like

i love that example! manually encoded and referencing with markdown is a lot of friction for writers who just want to write (imho) and in some sense, it feels like it’s not quite the ethos ghost, or perhaps i’m wrong

as an alternative, could this be done with a chrome extension?

for now, it’s crude, but i’ll be using call-out boxes right below paragraphs to draw attention to specific reference material - this could be done “end of post” and simply refd in a paragraph like:

“It was the best of times, it was the worst of times [*1]”

then for *1 use the colored call-out box and pick a single color for all footnote references at bottom of post

1 Like

The solution proposed 4 years ago in this thread using ^[1]^ to create superscript does not work in 2023. It just adds ^[1]^ as additional text. One has to copy paste some text containing a superscript, and fiddle around with it when adding more footnotes ([2], etc.).

Not really something you would expect from a text editor.

Markdown is a solution that works, but unfortunately footnotes are not passed over multiple markdown cards. Making it impossible to insert other content and use markdown cards only for some nice features provided by markdown (tables, etc.).

In a world plagued with fake news, this feature is critical to make Ghost a publishing solution ready for serious journalism, or scientific articles.

4 Likes

These are two excellent points.

To reiterate:—

  1. Whilst footnotes are now easy using Ulysses or whatever to populate a markdown box on a page, footnotes should also transcribe across several Markdown boxes on a page to one single set of footnotes at the bottom of the page. So, not multiple sets of footnotes, each with a number [1] etc at the bottom of each markdown box . Indeed, it should not just work with markdown boxes. In fact it will have to work in a different way.

  2. Ghost, as a well known proponent of evidence based blogging and an advocate for that and for independent blogging, should prioritise this feature. It’s not ‘pretty’ and it’s not about pictures and so forth. It’s boring difficult coding. But it’s important, please get it done :blush:

3 Likes

I checked to see if I could find any references to footnote support in the Lexical editor framework being used, and I can’t find it. That doesn’t mean it doesn’t support footnotes, just that it doesn’t include any special handling for them.

1 Like

Thanks for looking. Footnotes work fine, but if there is more than one required in a page and all are to be collated at the bottom of the page, then all the page text content must be in one Markdown box. Any other boxes must be either above that or below (obviously!) which has an impact on page design. Not a problem for a simple text-based page with a picture above and something below the footnotes.

Alright guys, I stumbled over this topic because I was looking for a footnote solution but there still seems to be no native Ghost implementation.

I have absolutely zero coding skills but with 2h of fiddling and try and error here is a workaround that expands on the proposed solution from @Kevin but with proper formatting including backlinking so everything looks neat.

It requires to add an html card at the location for the footnote collection (snippet 2) as well as another html card for every passage you want to reference (snippet 1). In all cards you replace the desired text and edit the numbers for the referencing within the code for each footnote manually (1, 2, 3, 4…).

It’s quite a hastle and subtly disturbing if you’re just a writer and not an ex-Google Tech lead but it solves the problem.

If anyone finds that helpful, send me some love, I’m going to bed now.

Cheers!

Snippet 1:

<p>This is the text for the footnote.<sup class="footnote-ref"><a href="#fn1" id="fnref1">[1]</a></sup></p>

Snippet 2:

<hr class="footnotes-sep">
<section class="footnotes">
<ol class="footnotes-list">
<li id="fn1" class="footnote-item"><p>This is the text for the first footnote with an and-sign: &amp; more text in the first footnote with a line break:<br>
This is the new line for the first footnote. <a href="#fnref1" class="footnote-backref">↩︎</a></p>
</li>
<li id="fn2" class="footnote-item"><p>This is the text for the second footnote. <a href="#fnref2" class="footnote-backref">↩︎</a></p>
</li>
</ol>
</section>

The result looks like this (editor):

And post:

4 Likes

This is a huge improvement on what’s currently required.

At present, using markdown, it is possible to achieve the same, just so long as the whole text of the post is in a single HTML Card, plus there being no additional cards or text below the the single HTML Card with the footnotes (because, if there is, then the footnotes appear above the additional cards or text). So, currently (and fortunately now solved by @kutschkerf), if the footnotes are referenced from more than one HTML Card, then they appear at the bottom of each of those cards. Which is basically such a rigid system that it’s rarely applicable to anything but purely text pages.

@kutschkerf offers a solution that circumvent that ‘single html card’ limitation

It does require a disciplined use of saved Snippets (the Snippets we have been given today by @kutschkerf) on every new post/page with footnotes. Which is not ideal and not as good as pre-2018.

But thank you. This is workable and not too time consuming and allows several cards of different types to be used on one page/post with the footnote references remaining organised correctly at the bottom of the page/post where the second ‘Snippet’ we have been shown today should be placed.

I still maintain that it’s extraordinary that Ghost does not offer this out of the box.

Ghost is a bastion of evidence-based blogging - why is citation not built in?

Oh, and that not enough users have upvoted it is a poor excuse.

Why?

Because Ghost should ALSO follow its Mission statement, not just its user ‘ticks’ here.

Moderators: A reminder from your Mission Statement:

Our mission is to create the best open source tools for independent journalists and writers across the world, and have a real impact on the future of online media.

Rant over.

3 Likes

I suggest to save the code blocks as snippets in the Ghost editor so they can be summoned with “/“ and the first one or two letters of the snippet name. If you do a lot of referencing, you should get fairly quick soon.

1 Like

Agreed :blush: And thanks :blush:

I’ve got some code that makes a better user experience than this. Let me see if I can dig it up.

6 Likes