Add footnote support for wiki markdown

[gagahpangeran]

Depends on:

• Change fragment-target to scroll-padding-top #7980
• Update commonmark to v2.0 #8087

closes #7316

Now without any custom renderers and with simple approach.

How to use

Basic syntax:

Footnote[^ref]

[^ref]: Reference here

And will automatically assign number and render something like this:

Footnote¹

1. Reference here ↑

[1] link will target to the reference list item and ↑ link will go back to [1].

Some caveats

Be careful with exclamation

Valid:

osu! [^ref]

[^ref]: https://osu.ppy.sh

Invalid:

osu![^ref]

[^ref]: https://osu.ppy.sh

Be careful with duplicate reference key

Valid:

First[^ref]

Second[^ref]

[^ref]: Valid shared reference

Invalid:

First[^ref]

Second[^ref]

[^ref]: This become invalid
[^ref]: Valid shared reference

Demo

Use this branch for this example

footnote.mp4

[nanaya]

this extension sure likes producing weird output. This invalid list item aside, it also accepts [^1]: > aaa and produces blockquote. Similarly with [^1]: 1. aaa 😐

[gagahpangeran]

I wandering around and look at another markdown parser that support footnote, I think this is intentional that they accepts any kind of markdown syntax inside footnote list, for example see markdig footnotes and remark footnotes (now in remark-gfm)

Just do some moderation from wiki-side to not using weird syntax inside footnote list 🙃

I think they only need to use emphasis and link for footnote list in wiki, cc: @TicClick for confirmation.

PS:

Now github also support footnote, let's compare. GFM also render as blockquote for first case. For second case, GFM is dying and not render at all.

---

Syntax:

Test[^1]

[^1]: > aaa

Result:

Test¹

Footnotes

1. aaa

   ↩

[TicClick]

I think so, yeah. maybe some other basic formatting like bold/underlined, but that's going to be very rare. typical footnote usage is link references or remarks like the one under ¹ at https://osu.ppy.sh/wiki/VCC#criteria

[nanaya]

I just noticed the tooltip arrow is aligned weirdly

[gagahpangeran]

Hmm, it's aligned correctly in firefox but not in chrome 🤔

[gagahpangeran]

Looks like there are some qtip2 bug in chrome that using first child element as positioning target.

Using this markdown

[*chat* **window**](/wiki/Chat_Console "Chat window")

will produce

<a class="osu-md__link" href="./Chat_Console" title="Chat window"><em>chat</em> <strong>window</strong></a>

In chrome, the tooltip use first child (em element) for its positioning.

In firefox, it works as expected and using the whole anchor element for its positioning.

---

I have some options forward to tackle this.

1. Debug qtip2 fork in https://github.com/notbakaneko/qTip2 and apply some patches.
2. Use custom renderer to directly add bracket into superscript anchor.
3. Remove the ::before and ::after element. But without bracket the superscript link is so small in mobile it so hard to click.
4. Remove the tooltip preview altogether so we don't have to worry about this bug.

Thoughts?

PS: At some point we have to replace qtip2 to another library, it's already abandoned since long time ago.

[peppy]

I wouldn't see this as a blocker to get this PR merged. Probably fine to create a separate issue tracking it.