Define the badge add the script to let badge has its own style.

Developer.md

@@ -36,8 +36,8 @@ This article is written for internal use, just for convenience.
 - Utility : Some data-process helper.
 - Youtube : Any video upload in youtube.
 
-## Prefix
-- [Close duplicated] : Old issue, not implemented or fixed in the current milestone.
+## Badge
+- [outdated] : Old issue, not implemented or fixed in the current milestone.
 
 ## Example link
 

layouts/changelog/single.html

@@ -110,4 +110,5 @@ <h3 class="single__subtitle">{{ .Params.subtitle }}</h3>
 </script>
 {{ partial "script/single-script" . }}
 {{ partial "script/github-mention-link" . }}
+{{ partial "script/badge" . }}
 {{ end }}

layouts/partials/script/badge.html

@@ -0,0 +1,29 @@
+<script> 
+    // replace [text] to badge style.
+    function replaceBadge(innerHtml, mappings) {
+        return innerHtml.replace(/\[(.*?)\]/, (match, p1) => {
+            const mapping = mappings[p1];
+            if(!mapping) {
+                return match;
+            }
+
+            const color = mappings[p1].color;
+            const style = 'background-color: ' + color + '; color: white; padding: 4px 8px; text-align: center; border-radius: 5px; font-family: Arial, Helvetica, sans-serif;'
+            const replaceWith = '<span style="' + style + '">' + p1 + '</span>'
+
+            return replaceWith;
+        });
+    }
+
+    const liList = document.getElementsByTagName('li');
+
+    for (var i = 0; i<liList.length; i++) {  
+        const li = liList[i]; 
+
+        li.innerHTML = replaceBadge(li.innerHTML, {
+            outdated: {
+                color: 'Red',
+            }
+        });
+    }
+</script>