feat: enhance code block rendering with dynamic formatting and highlighting

Author: Siumauricio

apps/website/app/[locale]/blog/[slug]/components/CodeBlock.tsx

@@ -1,55 +1,85 @@
+"use client";
+
 import { CopyButton } from "@/components/ui/copy-button";
-import prettier from "prettier";
-import { codeToHtml } from "shiki";
+import * as babel from "prettier/plugins/babel";
+import * as estree from "prettier/plugins/estree";
+import * as prettier from "prettier/standalone";
+import { type JSX, useLayoutEffect, useState } from "react";
 import type { BundledLanguage } from "shiki/bundle/web";
+import { highlight } from "./shared";
 
-interface LanguageProps {
-	children: string;
+interface CodeBlockProps {
+	code: string;
 	lang: BundledLanguage;
+	initial?: JSX.Element;
+}
+
+async function formatCode(code: string, lang: string) {
+	try {
+		// Configuración básica para JavaScript/TypeScript
+		const plugins = [babel, estree];
+		console.log("Formatting with plugins:", plugins);
+
+		const formatted = await prettier.format(code, {
+			parser: "babel-ts",
+			plugins,
+			semi: true,
+			singleQuote: true,
+			tabWidth: 2,
+			useTabs: false,
+			printWidth: 120,
+		});
+
+		console.log("Formatted code:", formatted);
+		return formatted;
+	} catch (error) {
+		console.error("Error formatting code:", error);
+		return code; // Retorna el código original si hay error
+	}
 }
 
-const getParserForLanguage = (language: string): string => {
-	const languageMap: { [key: string]: string } = {
-		js: "babel",
-		jsx: "babel",
-		ts: "typescript",
-		tsx: "typescript",
-		json: "json",
-		css: "css",
-		scss: "scss",
-		less: "less",
-		html: "html",
-		xml: "xml",
-		markdown: "markdown",
-		md: "markdown",
-		yaml: "yaml",
-		yml: "yaml",
-	};
-
-	return languageMap[language.toLowerCase()] || "babel";
-};
-
-export async function CodeBlock(props: LanguageProps) {
-	const format = await prettier.format(props.children, {
-		semi: true,
-		singleQuote: true,
-		tabWidth: 2,
-		useTabs: false,
-		printWidth: 120,
-		parser: getParserForLanguage(props.lang),
-	});
-	const out = await codeToHtml(format, {
-		lang: props.lang,
-		theme: "houston",
-	});
+export function CodeBlock({ code, lang, initial }: CodeBlockProps) {
+	const [nodes, setNodes] = useState<JSX.Element | undefined>(initial);
+	const [formattedCode, setFormattedCode] = useState(code);
+
+	useLayoutEffect(() => {
+		async function formatAndHighlight() {
+			try {
+				console.log("Original code:", code);
+				const formatted = await formatCode(code, lang);
+				setFormattedCode(formatted);
+
+				// Then highlight the formatted code
+				const highlighted = await highlight(formatted, lang);
+				setNodes(highlighted);
+			} catch (error) {
+				console.error("Error in formatAndHighlight:", error);
+				// If formatting fails, try to highlight the original code
+				const highlighted = await highlight(code, lang);
+				setNodes(highlighted);
+			}
+		}
+
+		void formatAndHighlight();
+	}, [code, lang]);
+
+	if (!nodes) {
+		return (
+			<div className="group relative">
+				<div className="text-sm p-4 rounded-lg bg-[#18191F] overflow-auto animate-pulse">
+					<div className="h-4 bg-gray-700 rounded w-3/4 mb-2" />
+					<div className="h-4 bg-gray-700 rounded w-1/2" />
+				</div>
+			</div>
+		);
+	}
 
 	return (
 		<div className="group relative">
-			<CopyButton text={format} />
-			<div
-				dangerouslySetInnerHTML={{ __html: out }}
-				className="text-sm p-4 rounded-lg bg-[#18191F] overflow-auto"
-			/>
+			<CopyButton text={formattedCode} />
+			<div className="text-sm p-4 rounded-lg bg-[#18191F] overflow-auto">
+				{nodes}
+			</div>
 		</div>
 	);
 }

apps/website/app/[locale]/blog/[slug]/components/shared.ts

@@ -0,0 +1,19 @@
+import { toJsxRuntime } from "hast-util-to-jsx-runtime";
+import type { JSX } from "react";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import type { BundledLanguage } from "shiki/bundle/web";
+import { codeToHast } from "shiki/bundle/web";
+
+export async function highlight(code: string, lang: BundledLanguage) {
+	const out = await codeToHast(code, {
+		lang,
+		theme: "houston",
+	});
+
+	return toJsxRuntime(out, {
+		Fragment,
+		jsx,
+		jsxs,
+	}) as JSX.Element;
+}

apps/website/app/[locale]/blog/[slug]/page.tsx

@@ -177,9 +177,10 @@ export default async function BlogPostPage({ params }: Props) {
 		code: ({ className, children }) => {
 			const match = /language-(\w+)/.exec(className || "");
 			return (
-				<CodeBlock lang={match ? (match[1] as BundledLanguage) : "ts"}>
-					{children?.toString() || ""}
-				</CodeBlock>
+				<CodeBlock
+					lang={match ? (match[1] as BundledLanguage) : "ts"}
+					code={children?.toString() || ""}
+				/>
 			);
 		},
 	};

apps/website/package.json

@@ -6,12 +6,13 @@
 	"scripts": {
 		"dev": "next dev",
 		"build": "next build",
-		"start": "next start",
+		"start": "next start -p 3001",
 		"lint": "next lint",
 		"typecheck": "tsc --noEmit"
 	},
 	"browserslist": "defaults, not ie <= 11",
 	"dependencies": {
+		"hast-util-to-jsx-runtime": "2.3.5",
 		"@headlessui/react": "^2.2.0",
 		"@headlessui/tailwindcss": "^0.2.0",
 		"@radix-ui/react-accordion": "^1.2.1",