Merge pull request #12688 from gagahpangeran/osu-markdown

Implement osu!-styled Markdown container

osu.Game.Tests/Visual/UserInterface/TestSceneOsuMarkdownContainer.cs

@@ -0,0 +1,240 @@
+// 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 NUnit.Framework;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Graphics.Containers.Markdown;
+using osu.Game.Overlays;
+
+namespace osu.Game.Tests.Visual.UserInterface
+{
+    public class TestSceneOsuMarkdownContainer : OsuTestScene
+    {
+        private OsuMarkdownContainer markdownContainer;
+
+        [Cached]
+        private readonly OverlayColourProvider overlayColour = new OverlayColourProvider(OverlayColourScheme.Orange);
+
+        [SetUp]
+        public void Setup() => Schedule(() =>
+        {
+            Children = new Drawable[]
+            {
+                new Box
+                {
+                    Colour = overlayColour.Background5,
+                    RelativeSizeAxes = Axes.Both,
+                },
+                new BasicScrollContainer
+                {
+                    RelativeSizeAxes = Axes.Both,
+                    Padding = new MarginPadding(20),
+                    Child = markdownContainer = new OsuMarkdownContainer
+                    {
+                        RelativeSizeAxes = Axes.X,
+                        AutoSizeAxes = Axes.Y
+                    }
+                }
+            };
+        });
+
+        [Test]
+        public void TestEmphases()
+        {
+            AddStep("Emphases", () =>
+            {
+                markdownContainer.Text = @"_italic with underscore_
+*italic with asterisk*
+__bold with underscore__
+**bold with asterisk**
+*__italic with asterisk, bold with underscore__*
+_**italic with underscore, bold with asterisk**_";
+            });
+        }
+
+        [Test]
+        public void TestHeading()
+        {
+            AddStep("Add Heading", () =>
+            {
+                markdownContainer.Text = @"# Header 1
+## Header 2
+### Header 3
+#### Header 4
+##### Header 5";
+            });
+        }
+
+        [Test]
+        public void TestLink()
+        {
+            AddStep("Add Link", () =>
+            {
+                markdownContainer.Text = "[Welcome to osu!](https://osu.ppy.sh)";
+            });
+        }
+
+        [Test]
+        public void TestLinkWithInlineText()
+        {
+            AddStep("Add Link with inline text", () =>
+            {
+                markdownContainer.Text = "Hey, [welcome to osu!](https://osu.ppy.sh) Please enjoy the game.";
+            });
+        }
+
+        [Test]
+        public void TestInlineCode()
+        {
+            AddStep("Add inline code", () =>
+            {
+                markdownContainer.Text = "This is `inline code` text";
+            });
+        }
+
+        [Test]
+        public void TestParagraph()
+        {
+            AddStep("Add paragraph", () =>
+            {
+                markdownContainer.Text = @"first paragraph
+
+second paragraph
+
+third paragraph";
+            });
+        }
+
+        [Test]
+        public void TestFencedCodeBlock()
+        {
+            AddStep("Add Code Block", () =>
+            {
+                markdownContainer.Text = @"```markdown
+# Markdown code block
+
+This is markdown code block.
+```";
+            });
+        }
+
+        [Test]
+        public void TestSeparator()
+        {
+            AddStep("Add Seperator", () =>
+            {
+                markdownContainer.Text = @"Line above
+
+---
+
+Line below";
+            });
+        }
+
+        [Test]
+        public void TestQuote()
+        {
+            AddStep("Add quote", () =>
+            {
+                markdownContainer.Text =
+                    @"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.";
+            });
+        }
+
+        [Test]
+        public void TestTable()
+        {
+            AddStep("Add Table", () =>
+            {
+                markdownContainer.Text =
+                    @"| Left Aligned  | Center Aligned | Right Aligned |
+| :------------------- | :--------------------: | ---------------------:|
+| Long Align Left Text | Long Align Center Text | Long Align Right Text |
+| Align Left           |      Align Center      |           Align Right |
+| Left                 |         Center         |                 Right |";
+            });
+        }
+
+        [Test]
+        public void TestUnorderedList()
+        {
+            AddStep("Add Unordered List", () =>
+            {
+                markdownContainer.Text = @"- First item level 1
+- Second item level 1
+    - First item level 2
+        - First item level 3
+        - Second item level 3
+        - Third item level 3
+            - First item level 4
+            - Second item level 4
+            - Third item level 4
+    - Second item level 2
+    - Third item level 2
+- Third item level 1";
+            });
+        }
+
+        [Test]
+        public void TestOrderedList()
+        {
+            AddStep("Add Ordered List", () =>
+            {
+                markdownContainer.Text = @"1. First item level 1
+2. Second item level 1
+    1. First item level 2
+        1. First item level 3
+        2. Second item level 3
+        3. Third item level 3
+            1. First item level 4
+            2. Second item level 4
+            3. Third item level 4
+    2. Second item level 2
+    3. Third item level 2
+3. Third item level 1";
+            });
+        }
+
+        [Test]
+        public void TestLongMixedList()
+        {
+            AddStep("Add long mixed list", () =>
+            {
+                markdownContainer.Text = @"1. The osu! World Cup is a country-based team tournament played on the osu! game mode.
+   - While this competition is planned as a 4 versus 4 setup, this may change depending on the number of incoming registrations.
+2. Beatmap scoring is based on Score V2.
+3. The beatmaps for each round will be announced by the map selectors in advance on the Sunday before the actual matches take place. Only these beatmaps will be used during the respective matches.
+   - One beatmap will be a tiebreaker beatmap. This beatmap will only be played in case of a tie. **The only exception to this is the Qualifiers pool.**
+4. The match schedule will be settled by the Tournament Management (see the [scheduling instructions](#scheduling-instructions)).
+5. If no staff or referee is available, the match will be postponed.
+6. Use of the Visual Settings to alter background dim or disable beatmap elements like storyboards and skins are allowed.
+7. If the beatmap ends in a draw, the map will be nullified and replayed.
+8. If a player disconnects, their scores will not be counted towards their team's total.
+   - Disconnects within 30 seconds or 25% of the beatmap length (whichever happens first) after beatmap begin can be aborted and/or rematched. This is up to the referee's discretion.
+9. Beatmaps cannot be reused in the same match unless the map was nullified.
+10. If less than the minimum required players attend, the maximum time the match can be postponed is 10 minutes.
+11. Exchanging players during a match is allowed without limitations.
+    - **If a map rematch is required, exchanging players is not allowed. With the referee's discretion, an exception can be made if the previous roster is unavailable to play.**
+12. Lag is not a valid reason to nullify a beatmap.
+13. All players are supposed to keep the match running fluently and without delays. Penalties can be issued to the players if they cause excessive match delays.
+14. If a player disconnects between maps and the team cannot provide a replacement, the match can be delayed 10 minutes at maximum.
+15. All players and referees must be treated with respect. Instructions of the referees and tournament Management are to be followed. Decisions labeled as final are not to be objected.
+16. Disrupting the match by foul play, insulting and provoking other players or referees, delaying the match or other deliberate inappropriate misbehavior is strictly prohibited.
+17. The multiplayer chatrooms are subject to the [osu! community rules](/wiki/Rules).
+    - Breaking the chat rules will result in a silence. Silenced players can not participate in multiplayer matches and must be exchanged for the time being.
+18. **The seeding method will be revealed after all the teams have played their Qualifier rounds.**
+19. Unexpected incidents are handled by the tournament management. Referees may allow higher tolerance depending on the circumstances. This is up to their discretion.
+20. Penalties for violating the tournament rules may include:
+    - Exclusion of specific players for one beatmap
+    - Exclusion of specific players for an entire match
+    - Declaring the match as Lost by Default
+    - Disqualification from the entire tournament
+    - Disqualification from the current and future official tournaments until appealed
+    - Any modification of these rules will be announced.";
+            });
+        }
+    }
+}

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

@@ -0,0 +1,82 @@
+// 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;
+using Markdig.Extensions.AutoIdentifiers;
+using Markdig.Extensions.Tables;
+using Markdig.Extensions.Yaml;
+using Markdig.Syntax;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Containers.Markdown;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics.Sprites;
+
+namespace osu.Game.Graphics.Containers.Markdown
+{
+    public class OsuMarkdownContainer : MarkdownContainer
+    {
+        public OsuMarkdownContainer()
+        {
+            LineSpacing = 21;
+        }
+
+        protected override void AddMarkdownComponent(IMarkdownObject markdownObject, FillFlowContainer container, int level)
+        {
+            switch (markdownObject)
+            {
+                case YamlFrontMatterBlock _:
+                    // Don't parse YAML Frontmatter
+                    break;
+
+                case ListItemBlock listItemBlock:
+                    var isOrdered = ((ListBlock)listItemBlock.Parent).IsOrdered;
+                    var childContainer = CreateListItem(listItemBlock, level, isOrdered);
+                    container.Add(childContainer);
+                    foreach (var single in listItemBlock)
+                        base.AddMarkdownComponent(single, childContainer.Content, level);
+                    break;
+
+                default:
+                    base.AddMarkdownComponent(markdownObject, container, level);
+                    break;
+            }
+        }
+
+        public override SpriteText CreateSpriteText() => new OsuSpriteText
+        {
+            Font = OsuFont.GetFont(size: 14),
+        };
+
+        public override MarkdownTextFlowContainer CreateTextFlow() => new OsuMarkdownTextFlowContainer();
+
+        protected override MarkdownHeading CreateHeading(HeadingBlock headingBlock) => new OsuMarkdownHeading(headingBlock);
+
+        protected override MarkdownFencedCodeBlock CreateFencedCodeBlock(FencedCodeBlock fencedCodeBlock) => new OsuMarkdownFencedCodeBlock(fencedCodeBlock);
+
+        protected override MarkdownSeparator CreateSeparator(ThematicBreakBlock thematicBlock) => new OsuMarkdownSeparator();
+
+        protected override MarkdownQuoteBlock CreateQuoteBlock(QuoteBlock quoteBlock) => new OsuMarkdownQuoteBlock(quoteBlock);
+
+        protected override MarkdownTable CreateTable(Table table) => new OsuMarkdownTable(table);
+
+        protected override MarkdownList CreateList(ListBlock listBlock) => new MarkdownList
+        {
+            Padding = new MarginPadding(0)
+        };
+
+        protected virtual OsuMarkdownListItem CreateListItem(ListItemBlock listItemBlock, int level, bool isOrdered)
+        {
+            if (isOrdered)
+                return new OsuMarkdownOrderedListItem(listItemBlock.Order);
+
+            return new OsuMarkdownUnorderedListItem(level);
+        }
+
+        protected override MarkdownPipeline CreateBuilder()
+            => new MarkdownPipelineBuilder().UseAutoIdentifiers(AutoIdentifierOptions.GitHub)
+                                            .UseEmojiAndSmiley()
+                                            .UseYamlFrontMatter()
+                                            .UseAdvancedExtensions().Build();
+    }
+}

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

@@ -0,0 +1,45 @@
+// 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.Syntax;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers.Markdown;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Overlays;
+
+namespace osu.Game.Graphics.Containers.Markdown
+{
+    public class OsuMarkdownFencedCodeBlock : MarkdownFencedCodeBlock
+    {
+        // TODO : change to monospace font for this component
+        public OsuMarkdownFencedCodeBlock(FencedCodeBlock fencedCodeBlock)
+            : base(fencedCodeBlock)
+        {
+        }
+
+        protected override Drawable CreateBackground() => new CodeBlockBackground();
+
+        public override MarkdownTextFlowContainer CreateTextFlow() => new CodeBlockTextFlowContainer();
+
+        private class CodeBlockBackground : Box
+        {
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                RelativeSizeAxes = Axes.Both;
+                Colour = colourProvider.Background6;
+            }
+        }
+
+        private class CodeBlockTextFlowContainer : OsuMarkdownTextFlowContainer
+        {
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                Colour = colourProvider.Light1;
+                Margin = new MarginPadding(10);
+            }
+        }
+    }
+}

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

@@ -0,0 +1,75 @@
+// 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.Syntax;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers.Markdown;
+using osu.Framework.Graphics.Sprites;
+
+namespace osu.Game.Graphics.Containers.Markdown
+{
+    public class OsuMarkdownHeading : MarkdownHeading
+    {
+        private readonly int level;
+
+        public OsuMarkdownHeading(HeadingBlock headingBlock)
+            : base(headingBlock)
+        {
+            level = headingBlock.Level;
+        }
+
+        public override MarkdownTextFlowContainer CreateTextFlow() => new HeadingTextFlowContainer
+        {
+            Weight = GetFontWeightByLevel(level),
+        };
+
+        protected override float GetFontSizeByLevel(int level)
+        {
+            // Reference for this font size
+            // https://github.com/ppy/osu-web/blob/376cac43a051b9c85ce95e2c446099be187b3e45/resources/assets/less/bem/osu-md.less#L9
+            // https://github.com/ppy/osu-web/blob/376cac43a051b9c85ce95e2c446099be187b3e45/resources/assets/less/variables.less#L161
+            const float base_font_size = 14;
+
+            switch (level)
+            {
+                case 1:
+                    return 30 / base_font_size;
+
+                case 2:
+                    return 26 / base_font_size;
+
+                case 3:
+                    return 20 / base_font_size;
+
+                case 4:
+                    return 18 / base_font_size;
+
+                case 5:
+                    return 16 / base_font_size;
+
+                default:
+                    return 1;
+            }
+        }
+
+        protected virtual FontWeight GetFontWeightByLevel(int level)
+        {
+            switch (level)
+            {
+                case 1:
+                case 2:
+                    return FontWeight.SemiBold;
+
+                default:
+                    return FontWeight.Bold;
+            }
+        }
+
+        private class HeadingTextFlowContainer : OsuMarkdownTextFlowContainer
+        {
+            public FontWeight Weight { get; set; }
+
+            protected override SpriteText CreateSpriteText() => base.CreateSpriteText().With(t => t.Font = t.Font.With(weight: Weight));
+        }
+    }
+}

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

@@ -0,0 +1,48 @@
+// 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.Syntax.Inlines;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics.Containers.Markdown;
+using osu.Framework.Graphics.Sprites;
+using osu.Framework.Input.Events;
+using osu.Game.Overlays;
+
+namespace osu.Game.Graphics.Containers.Markdown
+{
+    public class OsuMarkdownLinkText : MarkdownLinkText
+    {
+        [Resolved]
+        private OverlayColourProvider colourProvider { get; set; }
+
+        private SpriteText spriteText;
+
+        public OsuMarkdownLinkText(string text, LinkInline linkInline)
+            : base(text, linkInline)
+        {
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            spriteText.Colour = colourProvider.Light2;
+        }
+
+        public override SpriteText CreateSpriteText()
+        {
+            return spriteText = base.CreateSpriteText();
+        }
+
+        protected override bool OnHover(HoverEvent e)
+        {
+            spriteText.Colour = colourProvider.Light1;
+            return base.OnHover(e);
+        }
+
+        protected override void OnHoverLost(HoverLostEvent e)
+        {
+            spriteText.Colour = colourProvider.Light2;
+            base.OnHoverLost(e);
+        }
+    }
+}

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

@@ -0,0 +1,44 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Containers.Markdown;
+using osu.Framework.Graphics.Sprites;
+using osuTK;
+
+namespace osu.Game.Graphics.Containers.Markdown
+{
+    public abstract class OsuMarkdownListItem : CompositeDrawable
+    {
+        [Resolved]
+        private IMarkdownTextComponent parentTextComponent { get; set; }
+
+        public FillFlowContainer Content { get; private set; }
+
+        protected OsuMarkdownListItem()
+        {
+            AutoSizeAxes = Axes.Y;
+            RelativeSizeAxes = Axes.X;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            InternalChildren = new Drawable[]
+            {
+                CreateMarker(),
+                Content = new FillFlowContainer
+                {
+                    AutoSizeAxes = Axes.Y,
+                    RelativeSizeAxes = Axes.X,
+                    Direction = FillDirection.Vertical,
+                    Spacing = new Vector2(10, 10),
+                }
+            };
+        }
+
+        protected virtual SpriteText CreateMarker() => parentTextComponent.CreateSpriteText();
+    }
+}

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

@@ -0,0 +1,27 @@
+// 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 osu.Framework.Graphics;
+using osu.Framework.Graphics.Sprites;
+
+namespace osu.Game.Graphics.Containers.Markdown
+{
+    public class OsuMarkdownOrderedListItem : OsuMarkdownListItem
+    {
+        private const float left_padding = 30;
+
+        private readonly int order;
+
+        public OsuMarkdownOrderedListItem(int order)
+        {
+            this.order = order;
+            Padding = new MarginPadding { Left = left_padding };
+        }
+
+        protected override SpriteText CreateMarker() => base.CreateMarker().With(t =>
+        {
+            t.X = -left_padding;
+            t.Text = $"{order}.";
+        });
+    }
+}

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

@@ -0,0 +1,44 @@
+// 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.Syntax;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers.Markdown;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Overlays;
+
+namespace osu.Game.Graphics.Containers.Markdown
+{
+    public class OsuMarkdownQuoteBlock : MarkdownQuoteBlock
+    {
+        public OsuMarkdownQuoteBlock(QuoteBlock quoteBlock)
+            : base(quoteBlock)
+        {
+        }
+
+        protected override Drawable CreateBackground() => new QuoteBackground();
+
+        public override MarkdownTextFlowContainer CreateTextFlow()
+        {
+            return base.CreateTextFlow().With(f => f.Margin = new MarginPadding
+            {
+                Vertical = 10,
+                Horizontal = 20,
+            });
+        }
+
+        private class QuoteBackground : Box
+        {
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                Anchor = Anchor.CentreLeft;
+                Origin = Anchor.CentreLeft;
+                RelativeSizeAxes = Axes.Y;
+                Width = 2;
+                Colour = colourProvider.Content2;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,27 @@
+// 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 osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers.Markdown;
+using osu.Framework.Graphics.Shapes;
+using osu.Game.Overlays;
+
+namespace osu.Game.Graphics.Containers.Markdown
+{
+    public class OsuMarkdownSeparator : MarkdownSeparator
+    {
+        protected override Drawable CreateSeparator() => new Separator();
+
+        private class Separator : Box
+        {
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                RelativeSizeAxes = Axes.X;
+                Height = 1;
+                Colour = colourProvider.Background3;
+            }
+        }
+    }
+}

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

@@ -0,0 +1,18 @@
+// 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.Tables;
+using osu.Framework.Graphics.Containers.Markdown;
+
+namespace osu.Game.Graphics.Containers.Markdown
+{
+    public class OsuMarkdownTable : MarkdownTable
+    {
+        public OsuMarkdownTable(Table table)
+            : base(table)
+        {
+        }
+
+        protected override MarkdownTableCell CreateTableCell(TableCell cell, TableColumnDefinition definition, bool isHeading) => new OsuMarkdownTableCell(cell, definition, isHeading);
+    }
+}

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

@@ -0,0 +1,77 @@
+// 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.Tables;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers.Markdown;
+using osu.Framework.Graphics.Shapes;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Overlays;
+
+namespace osu.Game.Graphics.Containers.Markdown
+{
+    public class OsuMarkdownTableCell : MarkdownTableCell
+    {
+        private readonly bool isHeading;
+
+        public OsuMarkdownTableCell(TableCell cell, TableColumnDefinition definition, bool isHeading)
+            : base(cell, definition)
+        {
+            this.isHeading = isHeading;
+            Masking = false;
+            BorderThickness = 0;
+        }
+
+        [BackgroundDependencyLoader]
+        private void load()
+        {
+            AddInternal(CreateBorder(isHeading));
+        }
+
+        public override MarkdownTextFlowContainer CreateTextFlow() => new TableCellTextFlowContainer
+        {
+            Weight = isHeading ? FontWeight.Bold : FontWeight.Regular,
+            Padding = new MarginPadding(10),
+        };
+
+        protected virtual Box CreateBorder(bool isHeading)
+        {
+            if (isHeading)
+                return new TableHeadBorder();
+
+            return new TableBodyBorder();
+        }
+
+        private class TableHeadBorder : Box
+        {
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                Colour = colourProvider.Background3;
+                RelativeSizeAxes = Axes.X;
+                Height = 2;
+                Anchor = Anchor.BottomLeft;
+                Origin = Anchor.BottomLeft;
+            }
+        }
+
+        private class TableBodyBorder : Box
+        {
+            [BackgroundDependencyLoader]
+            private void load(OverlayColourProvider colourProvider)
+            {
+                Colour = colourProvider.Background4;
+                RelativeSizeAxes = Axes.X;
+                Height = 1;
+            }
+        }
+
+        private class TableCellTextFlowContainer : OsuMarkdownTextFlowContainer
+        {
+            public FontWeight Weight { get; set; }
+
+            protected override SpriteText CreateSpriteText() => base.CreateSpriteText().With(t => t.Font = t.Font.With(weight: Weight));
+        }
+    }
+}

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

@@ -0,0 +1,34 @@
+// 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.Syntax.Inlines;
+using osu.Framework.Allocation;
+using osu.Framework.Graphics;
+using osu.Framework.Graphics.Containers.Markdown;
+using osu.Framework.Graphics.Sprites;
+using osu.Game.Graphics.Sprites;
+using osu.Game.Overlays;
+
+namespace osu.Game.Graphics.Containers.Markdown
+{
+    public class OsuMarkdownTextFlowContainer : MarkdownTextFlowContainer
+    {
+        [Resolved]
+        private OverlayColourProvider colourProvider { get; set; }
+
+        protected override SpriteText CreateSpriteText() => new OsuSpriteText
+        {
+            Font = OsuFont.GetFont(size: 14),
+        };
+
+        protected override void AddLinkText(string text, LinkInline linkInline)
+            => AddDrawable(new OsuMarkdownLinkText(text, linkInline));
+
+        // TODO : Add background (colour B6) and change font to monospace
+        protected override void AddCodeInLine(CodeInline codeInline)
+            => AddText(codeInline.Content, t => { t.Colour = colourProvider.Light1; });
+
+        protected override SpriteText CreateEmphasisedSpriteText(bool bold, bool italic)
+            => CreateSpriteText().With(t => t.Font = t.Font.With(weight: bold ? FontWeight.Bold : FontWeight.Regular, italics: italic));
+    }
+}

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

@@ -0,0 +1,51 @@
+// 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 osu.Framework.Graphics;
+using osu.Framework.Graphics.Sprites;
+
+namespace osu.Game.Graphics.Containers.Markdown
+{
+    public class OsuMarkdownUnorderedListItem : OsuMarkdownListItem
+    {
+        private const float left_padding = 20;
+
+        private readonly int level;
+
+        public OsuMarkdownUnorderedListItem(int level)
+        {
+            this.level = level;
+
+            Padding = new MarginPadding { Left = left_padding };
+        }
+
+        protected override SpriteText CreateMarker() => base.CreateMarker().With(t =>
+        {
+            t.Text = GetTextMarker(level);
+            t.Font = t.Font.With(size: t.Font.Size / 2);
+            t.Origin = Anchor.Centre;
+            t.X = -left_padding / 2;
+            t.Y = t.Font.Size;
+        });
+
+        /// <summary>
+        /// Get text marker based on <paramref name="level"/>
+        /// </summary>
+        /// <param name="level">The markdown level of current list item.</param>
+        /// <returns>The marker string of this list item</returns>
+        protected virtual string GetTextMarker(int level)
+        {
+            switch (level)
+            {
+                case 1:
+                    return "●";
+
+                case 2:
+                    return "○";
+
+                default:
+                    return "■";
+            }
+        }
+    }
+}