feat: whyrating - initial project from turbostarter boilerplate

apps/web/src/modules/common/markdown/code.tsx

@@ -0,0 +1,45 @@
+import { useTheme } from "next-themes";
+import ShikiHighlighter from "react-shiki";
+
+import { cn } from "@turbostarter/ui";
+
+import type { ReactNode } from "react";
+import type { Element } from "react-shiki";
+
+interface CodeHighlightProps {
+  className?: string | undefined;
+  children?: ReactNode | undefined;
+  node?: Element | undefined;
+  inline?: boolean;
+}
+
+export const CodeHighlight = ({
+  inline = false,
+  className,
+  children,
+  ...props
+}: CodeHighlightProps) => {
+  const { resolvedTheme } = useTheme();
+  const match = className?.match(/language-(\w+)/);
+  const language = match ? match[1] : undefined;
+  // eslint-disable-next-line @typescript-eslint/no-base-to-string
+  const code = String(children).trim();
+
+  return !inline ? (
+    <ShikiHighlighter
+      language={language}
+      theme={`github-${resolvedTheme === "dark" ? "dark" : "light"}`}
+      {...props}
+      className={cn(
+        "overflow-hidden rounded-none border-y @md:rounded-lg @md:border",
+        className,
+      )}
+    >
+      {code}
+    </ShikiHighlighter>
+  ) : (
+    <code className={className} {...props}>
+      {children}
+    </code>
+  );
+};