fix: fixing the code client

Author: websiddu

lib/Code/Code.Client.tsx

@@ -7,32 +7,26 @@ import { Fragment, useLayoutEffect, useState } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';
 import type { BundledLanguage } from 'shiki/bundle/web';
 import { CodeBlockComponent } from './Code';
+import { transformerNotationHighlight } from '@shikijs/transformers';
 
 const highlight = async (
   code: string,
   lang: BundledLanguage,
   className: string = '',
-  theme: 'dark' | 'light' | 'auto' = 'auto',
   fileName?: string,
 ) => {
   const codeToHast = await import('shiki/bundle/web').then((mod) => mod.codeToHast);
 
-  let themeOrThemes: any = {
+  const hast = await codeToHast(code, {
+    lang,
     themes: {
       dark: 'material-theme-ocean',
       light: 'min-light',
     },
-  };
-
-  if (theme === 'dark') themeOrThemes = { theme: 'material-theme-ocean' };
-  else if (theme === 'light') themeOrThemes = { theme: 'min-light' };
-
-  const out = await codeToHast(code, {
-    lang,
-    ...themeOrThemes,
+    transformers: [transformerNotationHighlight()],
   });
 
-  return toJsxRuntime(out, {
+  return toJsxRuntime(hast, {
     Fragment,
     jsx,
     jsxs,
@@ -48,35 +42,41 @@ const highlight = async (
   }) as JSX.Element;
 };
 
-export const PreBlockClient = ({
-  children,
-  className,
-  fileName,
-  lang = 'text',
-  theme = 'auto',
-  ...rest
-}: {
-  children: any;
-  className?: string;
+const CodeBlockClient = (props: {
+  children: string;
+  className: string;
+  lang: BundledLanguage;
   fileName?: string;
-  lang?: BundledLanguage | 'text';
-  theme?: 'dark' | 'light' | 'auto';
-  [key: string]: any;
 }) => {
+  console.log('CodeBlockClient', props);
+
   const [nodes, setNodes] = useState(<></>);
 
+  let lang = 'text'; // default monospaced text
+
+  if (props.lang) {
+    lang = props.lang.replace('lang-', '');
+  }
+
+  if (props.className && props.className.startsWith('lang-')) {
+    lang = props.className.replace('lang-', '');
+  }
+
   useLayoutEffect(() => {
-    void highlight(children ?? '', lang as BundledLanguage, className, theme, fileName).then(
-      setNodes,
-    );
-  }, [children, lang, className, theme, fileName]);
+    void highlight(
+      props.children ?? '',
+      lang as BundledLanguage,
+      props.className,
+      props.fileName,
+    ).then(setNodes);
+  }, [props.children, props.lang, props.className]);
+
+  return nodes;
+};
 
-  return (
-    <pre
-      className={clsx('code-block', className)}
-      {...rest}
-    >
-      {nodes}
-    </pre>
-  );
+export const PreBlockClient = ({ children }: { children: any }) => {
+  if ('type' in children && children['type'] === 'code') {
+    return CodeBlockClient(children['props']);
+  }
+  return children;
 };

lib/Code/Code.Server.tsx

@@ -13,7 +13,6 @@ interface Props {
   lang: BundledLanguage;
   className: string;
   fileName?: string;
-  highlight?: string;
 }
 
 async function CodeBlock(props: Props) {
@@ -27,26 +26,6 @@ async function CodeBlock(props: Props) {
     lang = props.className.replace('lang-', '');
   }
 
-  const decorations: DecorationItem[] = [];
-
-  if (props.highlight) {
-    const linesAndRanges = props.highlight.split(',');
-    linesAndRanges.forEach((line) => {
-      if (line.includes('-')) {
-        const [start, end] = line.split('-');
-        decorations.push({
-          start: parseInt(start),
-          end: parseInt(end),
-          properties: {
-            class: 'highlighted',
-          },
-        });
-      } else {
-        decorations.push({ start: parseInt(line), end: parseInt(line) });
-      }
-    });
-  }
-
   const hast = await codeToHast(props.children, {
     lang,
     themes: {

lib/Code/Copy.tsx

@@ -43,7 +43,7 @@ export function CopyButton({ value, className, src, ...props }: CopyButtonProps)
         <span className="sr-only">Copy</span>
         {hasCopied ? <CheckIcon size={14} /> : <CopyIcon size={14} />}
       </button>
-      <div className="group-hover:block hidden absolute mt-2 text-center px-2 py-0.5 bg-gray-100 dark:bg-gray-800 rounded-md shadow-sm border dark:border-gray-800">
+      <div className="group-hover:block hidden absolute mt-2 text-center px-2 py-0.5 bg-gray-100 dark:bg-gray-800 rounded-md shadow-sm border dark:border-gray-800 whitespace-nowrap -translate-x-1/2 left-1/2">
         {hasCopied ? 'Copied!' : 'Copy'}
       </div>
     </div>

package.json

@@ -76,6 +76,7 @@
   "dependencies": {
     "clsx": "^2.1.1",
     "lucide-react": "^0.469.0",
+    "markdown-to-jsx": "^7.7.3",
     "next-mdx-remote": "^5.0.0",
     "react-medium-image-zoom": "^5.2.12",
     "react-router": "^7.1.1",

pnpm-lock.yaml

@@ -1,9 +1,9 @@
+import Markdown from 'markdown-to-jsx';
 import { PreBlockClient } from '../../lib/Code/Code.Client';
 
-export const CodeSamples = () => {
-  return (
-    <PreBlockClient lang="jsx">
-      {`
+const code = `
+
+\`\`\`tsx fileName="src/pages/BlogListPage.tsx"
 // Fetch data from the server
 const getData = async () => {
   const siteId = "*****";
@@ -34,8 +34,20 @@ const BlogListPage = async () => {
   );
 }
 
-export default BlogListPage;      
-      `.trim()}
-    </PreBlockClient>
+export default BlogListPage; 
+\`\`\`     
+      `.trim();
+
+export const CodeSamples = () => {
+  return (
+    <Markdown
+      options={{
+        overrides: {
+          pre: PreBlockClient,
+        },
+      }}
+    >
+      {code}
+    </Markdown>
   );
 };