add inline code highlighting in MD(X) files

components/Package/MarkdownContentBox/MarkdownInlineCode.tsx

@@ -0,0 +1,38 @@
+import { useEffect, useState } from 'react';
+import { type Highlighter } from 'shiki';
+
+import { inlineHighlighterInstance } from '~/util/shiki';
+
+type Props = {
+  code: string;
+  theme: string;
+};
+
+export default function MarkdownInlineCode({ code, theme }: Props) {
+  const [highlighter, setHighlighter] = useState<Highlighter | null>(null);
+
+  useEffect(() => {
+    void inlineHighlighterInstance.then(setHighlighter);
+  }, []);
+
+  if (!highlighter) {
+    return <code>{code}</code>;
+  }
+
+  const tokens = highlighter.codeToTokens(code, {
+    lang: 'tsx',
+    theme,
+  });
+
+  const line = tokens.tokens[0] ?? [];
+
+  return (
+    <code>
+      {line.map(token => (
+        <span key={`${token.offset}`} style={{ color: token.color }}>
+          {token.content}
+        </span>
+      ))}
+    </code>
+  );
+}

components/Package/MarkdownContentBox/MarkdownRenderer.tsx

@@ -16,6 +16,7 @@ import {
   TipBlockquoteIcon,
   WarningBlockquoteIcon,
 } from '~/components/Icons';
+import MarkdownInlineCode from '~/components/Package/MarkdownContentBox/MarkdownInlineCode';
 import rndDark from '~/styles/shiki/rnd-dark.json';
 import rndLight from '~/styles/shiki/rnd-light.json';
 import { extractAndStripBlockquoteType } from '~/util/extractAndStripBlockquoteType';
@@ -138,6 +139,12 @@ export default function MarkdownRenderer({ data, repoUrl, linkableHeaders = true
         source: ({ srcSet, ...rest }: any) => (
           <source srcSet={srcSet ? getReadmeAssetURL(srcSet, repoUrl) : undefined} {...rest} />
         ),
+        code: ({ children }: any) => (
+          <MarkdownInlineCode
+            code={children}
+            theme={tw.prefixMatch('dark') ? 'rnd-dark' : 'rnd-light'}
+          />
+        ),
         pre: ({ children }: any) => {
           const langClass = children?.props?.className;
           if (langClass) {

styles/shiki/rnd-dark.json

@@ -168,18 +168,7 @@
     "symbolIcon.booleanForeground": "#58a6ff",
     "symbolIcon.classForeground": "#f0883e",
     "symbolIcon.colorForeground": "#79c0ff",
-    "symbolIcon.constantForeground": [
-      "#aff5b4",
-      "#7ee787",
-      "#56d364",
-      "#3fb950",
-      "#2ea043",
-      "#238636",
-      "#196c2e",
-      "#0f5323",
-      "#033a16",
-      "#04260f"
-    ],
+    "symbolIcon.constantForeground": "#aff5b4",
     "symbolIcon.constructorForeground": "#d2a8ff",
     "symbolIcon.enumeratorForeground": "#f0883e",
     "symbolIcon.enumeratorMemberForeground": "#58a6ff",

util/shiki.ts

@@ -1,3 +1,13 @@
+import { createHighlighter, type ThemeRegistration } from 'shiki';
+
+import rndDark from '~/styles/shiki/rnd-dark.json';
+import rndLight from '~/styles/shiki/rnd-light.json';
+
+export const inlineHighlighterInstance = createHighlighter({
+  themes: [rndDark as ThemeRegistration, rndLight as ThemeRegistration],
+  langs: ['tsx'],
+});
+
 export const SHIKI_OPTS = {
   langAlias: {
     appxmanifest: 'xml',