From b866a618a16f9e4d3bceb2f429d0e5db799c136d Mon Sep 17 00:00:00 2001
From: nbats <44333466+nbats@users.noreply.github.com>
Date: Tue, 21 Jan 2025 22:37:15 -0800
Subject: [PATCH] Update toggleStarred.ts

---
 docs/.vitepress/markdown/toggleStarred.ts | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/docs/.vitepress/markdown/toggleStarred.ts b/docs/.vitepress/markdown/toggleStarred.ts
index 3d61483b2..3a56795fc 100644
--- a/docs/.vitepress/markdown/toggleStarred.ts
+++ b/docs/.vitepress/markdown/toggleStarred.ts
@@ -13,7 +13,6 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-
 import type { MarkdownRenderer } from 'vitepress'
 
 const excluded = ['Beginners Guide']
@@ -23,14 +22,19 @@ export function toggleStarredPlugin(md: MarkdownRenderer) {
     const contentToken = tokens[index + 2]
     if (
       !excluded.includes(env.frontmatter.title) &&
-      contentToken && 
+      contentToken &&
       (
-        contentToken.content.includes(':star:') ||  // Check if it contains ⭐
-        contentToken.content.includes(':star2:')    // Check if it contains 🌟
+        contentToken.content.includes(':star:') ||
+        contentToken.content.includes(':star2:')
       )
     ) {
-      return `<li class="starred">`
+      // Replace the placeholders with HTML
+      contentToken.content = contentToken.content
+        .replace(':star:', '<span class="star">⭐</span>') // Use HTML for star
+        .replace(':star2:', '<span class="star2">🌟</span>'); // Use HTML for star2
+
+      return `<li class="starred">`;
     }
-    return self.renderToken(tokens, index, options)
-  }
+    return self.renderToken(tokens, index, options);
+  };
 }