581: added ShikiHighlighter to LeaderboardMetadataWithId

Author: Arshadul-Monir

js/src/app/leaderboard/[leaderboardId]/_components/LeaderboardMetadataWithId.tsx

@@ -1,14 +1,13 @@
 import PrettyCounter from "@/components/ui/pretty-counter/PrettyCounter";
-import SyntaxStrip, {
-  SyntaxStripSize,
-} from "@/components/ui/syntax/SyntaxStrip";
+import { SyntaxStripSize } from "@/components/ui/syntax/SyntaxStrip";
 import DocumentDescription from "@/components/ui/title/DocumentDescription";
 import DocumentTitle from "@/components/ui/title/DocumentTitle";
 import { useLeaderboardMetadataByIdQuery } from "@/lib/api/queries/leaderboard";
 import useCountdown from "@/lib/hooks/useCountdown";
 import { Center, Title, Skeleton, Button, Box } from "@mantine/core";
 import { useEffect } from "react";
 import { Link } from "react-router-dom";
+import ShikiHighlighter from "react-shiki";
 
 type LeaderboardWithIdMetadataOptions = {
   showClock?: boolean;
@@ -19,7 +18,17 @@ type LeaderboardWithIdMetadataOptions = {
 export default function LeaderboardMetadataWithId(
   props: LeaderboardWithIdMetadataOptions,
 ) {
-  const { showClock = false, leaderboardId, syntaxStripSize } = props;
+  const fontSize = (() => {
+    switch (props.syntaxStripSize) {
+      case "sm":
+        return "0.62em";
+      case "md":
+        return "0.72em";
+      case "lg":
+        return "0.85em";
+    }
+  })();
+  const { showClock = false, leaderboardId } = props;
 
   const { data, status } = useLeaderboardMetadataByIdQuery(leaderboardId);
   const [countdown, reset] = useCountdown(-10);
@@ -93,11 +102,16 @@ export default function LeaderboardMetadataWithId(
       />
       <Title order={4} ta={"center"} mb={"xs"}>
         {leaderboardData.syntaxHighlightingLanguage ?
-          <SyntaxStrip
-            size={syntaxStripSize}
-            name={leaderboardData.name}
+          <ShikiHighlighter
             language={leaderboardData.syntaxHighlightingLanguage}
-          />
+            theme="github-dark-dimmed"
+            showLanguage={false}
+            structure="inline"
+            as="span"
+            style={{ fontSize }}
+          >
+            {leaderboardData.name}
+          </ShikiHighlighter>
         : leaderboardData.name}
       </Title>
       <Title order={6} ta={"center"} mb={"xs"}>