Add styling for footnote groups

osu.Game/Graphics/Containers/Markdown/Footnotes/OsuMarkdownFootnote.cs

@@ -0,0 +1,30 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using Markdig.Extensions.Footnotes;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers.Markdown;
+using osu.Framework.Graphics.Containers.Markdown.Footnotes;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Localisation;
+
+namespace osu.Game.Graphics.Containers.Markdown.Footnotes
+{
+    public partial class OsuMarkdownFootnote : MarkdownFootnote
+    {
+        public OsuMarkdownFootnote(Footnote footnote)
+            : base(footnote)
+        {
+        }
+
+        public override SpriteText CreateOrderMarker(int order) => CreateSpriteText().With(marker =>
+        {
+            marker.Text = LocalisableString.Format("{0}.", order);
+        });
+
+        public override MarkdownTextFlowContainer CreateTextFlow() => base.CreateTextFlow().With(textFlow =>
+        {
+            textFlow.Margin = new MarginPadding { Left = 30 };
+        });
+    }
+}

osu.Game/Graphics/Containers/Markdown/Footnotes/OsuMarkdownFootnoteBacklink.cs

@@ -0,0 +1,52 @@
+// Copyright (c) ppy Pty Ltd <contact@ppy.sh>. Licensed under the MIT Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using System.Collections.Generic;
+using Markdig.Extensions.Footnotes;
+using osu.Framework.Allocation;
+using osu.Framework.Extensions.IEnumerableExtensions;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers.Markdown;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Overlays;
+using osuTK;
+
+namespace osu.Game.Graphics.Containers.Markdown.Footnotes
+{
+    public partial class OsuMarkdownFootnoteBacklink : OsuHoverContainer
+    {
+        private readonly FootnoteLink backlink;
+
+        private SpriteIcon spriteIcon = null!;
+
+        [Resolved]
+        private IMarkdownTextComponent parentTextComponent { get; set; } = null!;
+
+        protected override IEnumerable<Drawable> EffectTargets => spriteIcon.Yield();
+
+        public OsuMarkdownFootnoteBacklink(FootnoteLink backlink)
+        {
+            this.backlink = backlink;
+            AutoSizeAxes = Axes.X;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load(OverlayColourProvider colourProvider)
+        {
+            float fontSize = parentTextComponent.CreateSpriteText().Font.Size;
+            Height = fontSize;
+
+            IdleColour = colourProvider.Light2;
+            HoverColour = colourProvider.Light1;
+
+            Add(spriteIcon = new SpriteIcon
+            {
+                Anchor = Anchor.Centre,
+                Origin = Anchor.Centre,
+                Margin = new MarginPadding { Left = 5 },
+                Size = new Vector2(fontSize / 2),
+                Icon = FontAwesome.Solid.ArrowUp,
+            });
+        }
+    }
+}

osu.Game/Graphics/Containers/Markdown/OsuMarkdownContainer.cs

@@ -15,8 +15,11 @@ using osu.Framework.Allocation;
 using osu.Framework.Graphics;
 using osu.Framework.Graphics.Containers;
 using osu.Framework.Graphics.Containers.Markdown;
+using osu.Framework.Graphics.Containers.Markdown.Footnotes;
 using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics.Containers.Markdown.Footnotes;
 using osu.Game.Graphics.Sprites;
+using osuTK;
 
 namespace osu.Game.Graphics.Containers.Markdown
 {
@@ -101,6 +104,10 @@ namespace osu.Game.Graphics.Containers.Markdown
             return new OsuMarkdownUnorderedListItem(level);
         }
 
+        protected override MarkdownFootnoteGroup CreateFootnoteGroup(FootnoteGroup footnoteGroup) => base.CreateFootnoteGroup(footnoteGroup).With(g => g.Spacing = new Vector2(5));
+
+        protected override MarkdownFootnote CreateFootnote(Footnote footnote) => new OsuMarkdownFootnote(footnote);
+
         // reference: https://github.com/ppy/osu-web/blob/05488a96b25b5a09f2d97c54c06dd2bae59d1dc8/app/Libraries/Markdown/OsuMarkdown.php#L301
         protected override MarkdownPipeline CreateBuilder()
         {

osu.Game/Graphics/Containers/Markdown/OsuMarkdownTextFlowContainer.cs

@@ -40,6 +40,8 @@ namespace osu.Game.Graphics.Containers.Markdown
 
         protected override void AddFootnoteLink(FootnoteLink footnoteLink) => AddDrawable(new OsuMarkdownFootnoteLink(footnoteLink));
 
+        protected override void AddFootnoteBacklink(FootnoteLink footnoteBacklink) => AddDrawable(new OsuMarkdownFootnoteBacklink(footnoteBacklink));
+
         protected override SpriteText CreateEmphasisedSpriteText(bool bold, bool italic)
             => CreateSpriteText().With(t => t.Font = t.Font.With(weight: bold ? FontWeight.Bold : FontWeight.Regular, italics: italic));