Should be able to parse the badge.

osu.Game.Rulesets.Karaoke/Online/API/Requests/Responses/APIChangelogBuild.cs

@@ -2,6 +2,7 @@
 // See the LICENCE file in the repository root for full licence text.
 
 using System;
+using System.Text.RegularExpressions;
 
 namespace osu.Game.Rulesets.Karaoke.Online.API.Requests.Responses;
 
@@ -76,4 +77,14 @@ public APIChangelogBuild CreateBuildWithContent(string content)
             PublishedAt = PublishedAt,
         };
     }
+
+    public string? GetFormattedContent()
+    {
+        if (Content == null)
+            return null;
+
+        // for able to parsing the badge, need to replace the " [content] " with " [content](content) ";
+        const string pattern = @"(?<=\s)\[(.*?)\](?=\s)";
+        return Regex.Replace(Content, pattern, m => $"[{m.Groups[1].Value}]({m.Groups[1].Value})");
+    }
 }

osu.Game.Rulesets.Karaoke/Overlays/Changelog/ChangeLogMarkdownContainer.cs

@@ -5,10 +5,14 @@
 using System.Linq;
 using Markdig.Syntax.Inlines;
 using osu.Framework.Graphics;
+using osu.Framework.Graphics.Colour;
+using osu.Framework.Graphics.Containers;
+using osu.Framework.Graphics.Shapes;
 using osu.Framework.Graphics.Sprites;
 using osu.Framework.Layout;
 using osu.Game.Graphics;
 using osu.Game.Graphics.Containers.Markdown;
+using osu.Game.Graphics.Sprites;
 using osu.Game.Rulesets.Karaoke.Online.API.Requests.Responses;
 using osuTK;
 
@@ -20,7 +24,7 @@ public ChangeLogMarkdownContainer(APIChangelogBuild build)
     {
         DocumentUrl = build.DocumentUrl;
         RootUrl = build.RootUrl;
-        Text = build.Content;
+        Text = build.GetFormattedContent();
     }
 
     public override OsuMarkdownTextFlowContainer CreateTextFlow() => new ChangeLogMarkdownTextFlowContainer();
@@ -50,6 +54,14 @@ protected override void AddLinkText(string text, LinkInline linkInline)
                 return;
             }
 
+            var badgeInfo = ChangelogBadgeInfo.GetBadgeInfoFromLink(text);
+
+            if (badgeInfo != null)
+            {
+                addBadgeInfo(badgeInfo);
+                return;
+            }
+
             base.AddLinkText(text, linkInline);
         }
 
@@ -96,6 +108,15 @@ private void addPullRequestInfo(ChangelogPullRequestInfo pullRequestInfo)
             }
         }
 
+        private void addBadgeInfo(ChangelogBadgeInfo badgeInfo)
+        {
+            AddDrawable(new Badge
+            {
+                BadgeText = badgeInfo.Text,
+                BadgeColour = badgeInfo.Color,
+            });
+        }
+
         /// <summary>
         /// Override <see cref="OsuMarkdownImage"/> to limit image display size
         /// </summary>
@@ -151,5 +172,46 @@ public UserLinkText(string text, LinkInline linkInline)
                 Padding = new MarginPadding { Top = 6 };
             }
         }
+
+        private partial class Badge : CompositeDrawable
+        {
+            private readonly Box background;
+            private readonly OsuSpriteText text;
+
+            public Badge()
+            {
+                AutoSizeAxes = Axes.Both;
+                Masking = true;
+                CornerRadius = 5;
+
+                InternalChildren = new Drawable[]
+                {
+                    background = new Box
+                    {
+                        RelativeSizeAxes = Axes.Both,
+                        Colour = Colour4.White,
+                    },
+                    text = new OsuSpriteText
+                    {
+                        Anchor = Anchor.Centre,
+                        Origin = Anchor.Centre,
+                        Font = OsuFont.GetFont(size: 12, weight: FontWeight.Bold),
+                        Margin = new MarginPadding { Horizontal = 5, Vertical = 3 },
+                    },
+                };
+            }
+
+            public ColourInfo BadgeColour
+            {
+                get => background.Colour;
+                set => background.Colour = value;
+            }
+
+            public string BadgeText
+            {
+                get => text.Text.ToString();
+                set => text.Text = value;
+            }
+        }
     }
 }

osu.Game.Rulesets.Karaoke/Overlays/Changelog/ChangelogBadgeInfo.cs

@@ -0,0 +1,43 @@
+// Copyright (c) andy840119 <[email protected]>. Licensed under the GPL Licence.
+// See the LICENCE file in the repository root for full licence text.
+
+using System.Collections.Generic;
+using osu.Framework.Extensions.Color4Extensions;
+using osuTK.Graphics;
+
+namespace osu.Game.Rulesets.Karaoke.Overlays.Changelog;
+
+public class ChangelogBadgeInfo
+{
+    // follow the definition in the https://github.com/karaoke-dev/karaoke-dev.github.io/blob/master/layouts/partials/script/badge.html
+    private static readonly IDictionary<string, string> colour_mappings = new Dictionary<string, string>
+    {
+        { "outdated", "#808080" },
+        { "rejected", "#FF0000" },
+    };
+
+    public Color4 Color { get; init; } = Color4.White;
+
+    public string Text { get; init; } = string.Empty;
+
+    /// <summary>
+    /// Trying to parse the badge from the text.
+    /// </summary>
+    /// <example>
+    /// [outdated]<br/>
+    /// [rejected]
+    /// </example>
+    /// <param name="text">Link text</param>
+    /// <returns></returns>
+    public static ChangelogBadgeInfo? GetBadgeInfoFromLink(string text)
+    {
+        if (!colour_mappings.TryGetValue(text, out string? repoUrl))
+            return null;
+
+        return new ChangelogBadgeInfo
+        {
+            Text = text,
+            Color = Color4Extensions.FromHex(repoUrl),
+        };
+    }
+}