Ghost Markdown Shortcut for Footnote

Developer help
1

Does anyone know what is the markdown shortcut for footnote?
If using markdown card and i type this ^[my footnote] in the markdown card, it will be generated as a footnote. but that only available from markdown card.

How about markdown shortcut from the koenig editor? I know that we can still use markdown as shortcut directly from koenig. so how about this?

Below are example image of what i mean:

This is using markdown card as you can see there

image
image1640Ă—446 29.7 KB

And this is the output

image
image1022Ă—418 21.9 KB

And unfortunately if add some text regularly in koenig editor after the markdown card. It will end up like this:

image
image894Ă—608 27.1 KB

Looks like we need to use markdown entirely if that happen. Any idea on the shortcut?

2

Hi @eddie!

Are you not comfortable with writing all your content inside a markdown card? Because that’s a perfectly fine way to write your articles, the HTML that’s produced is just as good as the markup produced by the main Ghost editor. Some people prefer writing in markdown, which is what the markdown card is for :blush:

1 Like
3

Prefer markdown shortcut compare to markdown card tbh. because it is more user friendly for writer. Markdown is more likely suitable for developer or geek.

4

if there is no support for footnote as shortcut in ghost editor, hoping for a support soon.
creating manually or using markdown card is not that great. Unless the whole typing experience reverted to markdown once again. Which will force editor to learn that and make used to it.

5

I can see what you mean, both cases have their drawbacks of being a little time consuming. I thought about this a bit and had an idea of using JavaScript to find links on the page and generating a footnote from those links:

In this CodePen I’m using JavaScript to locate any link in my main content that contains “fn” and converting them into a footnote. Whatever link is applied to the “fn” text is then generated at the bottom in a footnotes section, just like in the markdown version.

With this creating footnotes is as straightforward as creating a regular link :sparkles:. I’ve also written the code in such a way that you can choose what text to be in the link, so instead it could be “more info” or “details”. Hope you find this useful :blush:

6

Instead of fn , why not <sup> that contains <a> ?
I believe that most of the time <sup> that contains <a> is used to refer something at footnote.

What you’ve shown in the codepen, doesn’t it want to be PR to the ghost editor? So everyone else can make use of it in case they need it. I read it in the forum and found that some people also interesting in footnote that they already being using it since Ghost 1.0 until they drop the support. I mean, before this Ghost was fully markdown until Koenig arrived and kill some minor but useful stuff. But of course, Koenig is here for a reason: not everyone are markdown expert.

I hope this shortcut can be added to Ghost Editor. cc: @DavidDarnes

7

If you check the code I wrote you’ll see that it automatically generates the <sup> elements, as well as all the elements that are created when adding footnotes.

The reason for creating this is to suit your specific needs. From what I’ve seen in the forum there hasn’t been a demand for this addition. Meaning that either people are content with the footnote support within the Markdown card, or that people aren’t using footnotes very often.

You are of course welcome to contribute the addition yourself :blush:, more details can be found here:

8

There are actually quite a few. Also a voting there :point_down:

Well, looks like not that much, but it actually consider as a important, if not crucial, part of blogging. I’ve seen few blog wanna use reference but with bad “source” or “reference” implementation. Maybe because their current cms doesn’t support that. Ghost can fit that market. Usually blog that related to politics and current issue ; that of course require reference ; We both know why. Tech blog also use that, some if not all.

About Contribution

I don’t think that Ghost core developer will approved this because you said it is not demanding and it is claimed here

We generally don’t merge new features and larger changes without prior discussion with the core product team for tech/design specification.

I read that as small chance of approval as it is also not being approved in the prev forum post (above :point_up: ) and here.

mentioned because no reply indicator, didn’t know why . @DavidDarnes

9

@DavidDarnes i saw that there is no new product update . maybe this could be the next one while ghost staff are working from home during the pandemic

10

Universal footnotes are not an easy thing to support, as has been covered on the forum previously

There are workarounds available such as using markdown-only in posts where you need footnotes, or by manually linking footnotes up using the formatting tools available in the rich-text editor.

1 Like
11

instead of using html card like you suggest to manually link up the reference. why not creating a footnote card? so it won’t be “html” thing. still linking manually but easier and standardised compare to writing html on post which could break.

i wonder why the reply sometimes showing and sometimes doesn’t. so i tag mr @Kevin instead

1 Like
12

PRs are always welcome :wink: Everything is open source, if there’s a particular issue that is causing you problems then you are free to use your own resources or recruit help to fix it.

13

Hi David, I’m using the footnote code again and have applied it inside my themes’ post.hbs file. I’ve ammended the “Reference” H3 to a H6 and everything seems to be working

Is there a way to apply style changes so the footnote number in brackets [1], [2] etc. and the return character :leftwards_arrow_with_hook: both are color #a00000︎ please? No worries if this isn’t possible.

14

You should be able to target them in CSS like so:

<style>
.footnote-ref a,
.footnote-backref {
	color: red;
}
</style>

Hope this helps!

1 Like
15

Hi David, I tried inserted this in the Code Injection’s Site Header but had no luck.

Screenshot 2021-01-07 at 11.40.27
Screenshot 2021-01-07 at 11.40.271570Ă—584 54.6 KB

Apologies, does it need to be inserted within the footnotes code snippet in the post.hbs file instead? Happy New Year btw.

<style>
    .footnote-ref, {color: #a00000}
.footnote-backref {color: #a00000︎
    }
</style>
16

Sorry @rajeshtaylor, I think there was an issue in the original code I added, I’ve updated now and it should work. You can replace red with the colour of your choice, #a00000 in your case.

1 Like
17

Hi @DavidDarnes cheers.

I pasted this CodePen into the themes post.hbs file. Am hoping it’s the correct one? I only altered the H3 to H6 ’ header’ for “Reference”. Then applied the colour styling in Code Injection Header:

But I got unusual result. Only references 5 and 6 had the :leftwards_arrow_with_hook:︎ character appeared in red. References 1-4 remained black.

Ref 5 links to a pdf in Google Drive.
Ref 6 links to a pdf on a .gov site.
Refs (1-4) link to normal websites.

All the numbers i.e [1] [2] to [6] in the post remain in black. When I clicked on [5] and [6] which took me down to the referenced hyperlink, the colour of the character :leftwards_arrow_with_hook:︎ had changed back to black.

The functionality remains is great for my needs as I go back and update posts. your code saves me time re-numbering the footnote references manually. The colour styling was just for aesthetics really. I appreciate your help, its already saved me time with removing that mundane task.

Update:
I writing up a new post (in draft) and the :leftwards_arrow_with_hook:︎ character now appears in red. The [1], [2] numbering is still appearing in black.

18

I updated my original code sample here:

<style>
.footnote-ref a,
.footnote-backref {
	color: red;
}
</style>
19

Thanks buddy !

https://clipartkind.com/clipart/thank-you-clipart-399/

20

Footnote card for this Christmas

1 Like