feat: Refactor code highlighting implementation by introducing a custom highlighter, update dependencies, and enhance sitemap configuration

Author: SivaramPg

bun.lockb

@@ -10,8 +10,6 @@ const sitemapConfig = {
 		"/twitter-image.jpg",
 		"/robots.txt",
 		"/_not-found",
-		// Exclude any numeric entity URLs (shouldn't exist anymore, but safety net)
-		/^\/[a-z]+\/\d+$/,
 	],
 	transform: async (config, path) => {
 		// Priority based on page type

next-sitemap.config.js

@@ -10,30 +10,30 @@
 		"prepare": "husky"
 	},
 	"dependencies": {
-		"@tailwindcss/postcss": "^4.1.17",
+		"@tailwindcss/postcss": "^4.1.18",
 		"@tailwindcss/typography": "^0.5.19",
 		"clsx": "^2.1.1",
-		"next": "^16.0.7",
+		"next": "^16.1.3",
 		"next-sitemap": "^4.2.3",
 		"next-themes": "^0.4.6",
-		"posthog-js": "^1.302.2",
-		"react": "19.2.1",
-		"react-dom": "19.2.1",
+		"posthog-js": "^1.327.0",
+		"react": "19.2.3",
+		"react-dom": "19.2.3",
 		"tailwind-merge": "^3.4.0",
 		"tailwindcss-animate": "^1.0.7",
 		"use-clipboard-copy": "^0.2.0",
-		"zod": "^4.1.13"
+		"zod": "^4.3.5"
 	},
 	"devDependencies": {
-		"@biomejs/biome": "^2.3.8",
-		"@types/bun": "^1.3.4",
-		"@types/node": "^24.10.1",
-		"@types/react": "^19.2.7",
+		"@biomejs/biome": "^2.3.11",
+		"@types/bun": "^1.3.6",
+		"@types/node": "^25.0.9",
+		"@types/react": "^19.2.8",
 		"@types/react-dom": "^19.2.3",
 		"husky": "^9.1.7",
 		"lint-staged": "^16.2.7",
-		"shiki": "^3.19.0",
-		"tailwindcss": "^4.1.17",
+		"shiki": "^3.21.0",
+		"tailwindcss": "^4.1.18",
 		"typescript": "5.9.3"
 	},
 	"lint-staged": {

package.json

@@ -2,14 +2,12 @@
 
 import type { JSX } from "react"
 import { useEffect, useMemo, useState } from "react"
-import { codeToHtml } from "shiki"
-// Adjust path as necessary if you create the lib folder
+import { highlightCode } from "../lib/highlighter"
 import { defaultLanguageId, languageOptions } from "../lib/language-snippets"
 import { CopyButton } from "./copy-button"
 
 interface RequestDisplayElementProps {
 	slug: string
-	wrapText?: boolean
 }
 
 /**
@@ -26,7 +24,6 @@ interface ProcessedLanguageOption {
 
 const RequestDisplayElement = ({
 	slug,
-	wrapText = false,
 }: RequestDisplayElementProps): JSX.Element => {
 	const [selectedLangId, setSelectedLangId] =
 		useState<string>(defaultLanguageId)
@@ -49,15 +46,11 @@ const RequestDisplayElement = ({
 	// Effect to update highlighted HTML when the current snippet changes
 	useEffect(() => {
 		if (currentSnippet) {
-			codeToHtml(currentSnippet.code, {
-				lang: currentSnippet.id, // Use the id from LanguageOption
-				theme: "solarized-dark", // Or your preferred theme
-			})
+			highlightCode(currentSnippet.code, currentSnippet.id)
 				.then((html) => setHighlightedCodeHtml(html))
 				.catch((error) => {
 					console.error("Error highlighting code:", error)
 					// Fallback to plain text if shiki fails
-					// Ensure the fallback is also wrapped in pre/code for consistent styling by the parent div
 					const escapedCode = currentSnippet.code
 						.replace(/</g, "&lt;")
 						.replace(/>/g, "&gt;")
@@ -118,11 +111,7 @@ const RequestDisplayElement = ({
 					role="tabpanel"
 					id={`panel-${currentSnippet?.id}`}
 					aria-labelledby={`tab-${currentSnippet?.id}`}
-					className={`border-x border-b border-[#FFE81F11] overflow-x-auto rounded-b-lg ${processedOptions.length > 0 ? "rounded-t-none" : "rounded-t-lg"} [&>pre]:rounded-none [&>pre]:border-0 ${
-						wrapText
-							? "![&>pre]:text-nowrap overflow-y-auto"
-							: "![&>pre]:text-wrap overflow-y-hidden"
-					}`}
+					className={`border-x border-b border-[#FFE81F11] overflow-auto rounded-b-lg ${processedOptions.length > 0 ? "rounded-t-none" : "rounded-t-lg"} [&>pre]:rounded-none [&>pre]:border-0`}
 					style={{ fontSize: 15 }} // Minor functional change: adjusted fontSize from 14 to 15
 					/* biome-ignore lint/security/noDangerouslySetInnerHtml: <Shiki output is sanitized HTML> */
 					dangerouslySetInnerHTML={{ __html: highlightedCodeHtml }}

src/components/RequestDisplayElement.tsx

@@ -1,5 +1,5 @@
 import type { JSX } from "react"
-import { codeToHtml } from "shiki/bundle-web.mjs"
+import { highlightCode } from "../lib/highlighter"
 import { CopyButton } from "./copy-button"
 
 /**
@@ -9,7 +9,6 @@ import { CopyButton } from "./copy-button"
 interface ResponseDisplayElementProps {
 	/** The content to display, typically a JSON string. */
 	children: string
-	wrapText?: boolean
 }
 
 /**
@@ -19,12 +18,8 @@ interface ResponseDisplayElementProps {
  */
 const ResponseDisplayElement = async ({
 	children,
-	wrapText = false,
 }: ResponseDisplayElementProps): Promise<JSX.Element> => {
-	const html = await codeToHtml(children, {
-		lang: "json",
-		theme: "solarized-dark",
-	})
+	const html = await highlightCode(children, "json")
 
 	return (
 		<div className="response-display-element w-full max-w-(--breakpoint-lg) not-prose rounded-lg shadow-md overflow-hidden my-4 relative border border-[#FFE81F11]">
@@ -33,18 +28,14 @@ const ResponseDisplayElement = async ({
 			</div>
 			<div className="relative">
 				<div
-					className={`overflow-auto max-h-screen border-x border-b border-[#FFE81F11] rounded-b-lg ${
-						wrapText
-							? "[&>pre]:text-nowrap overflow-y-auto"
-							: "[&>pre]:text-wrap overflow-y-hidden"
-					}`}
+					className="overflow-auto max-h-[50vh] border-x border-b border-[#FFE81F11] rounded-b-lg"
 					style={{
 						fontSize: 16,
 					}}
-					/* biome-ignore lint/security/noDangerouslySetInnerHtml: <explanation> */
+					/* biome-ignore lint/security/noDangerouslySetInnerHtml: Shiki output is sanitized HTML */
 					dangerouslySetInnerHTML={{ __html: html }}
 				/>
-				<div className="absolute top-1.5 right-1.5">
+				<div className="absolute top-2 right-7">
 					<CopyButton text={children} />
 				</div>
 			</div>

src/components/ResponseDisplayElement.tsx

@@ -0,0 +1,82 @@
+/**
+ * Fine-grained Shiki highlighter with singleton pattern.
+ * Only loads the languages and theme we actually use for optimal bundle size.
+ */
+import type { HighlighterCore } from "shiki/core"
+import { createHighlighterCore } from "shiki/core"
+import { createJavaScriptRegexEngine } from "shiki/engine/javascript"
+
+/**
+ * Languages used in the application for code highlighting.
+ * These are dynamically imported for tree-shaking.
+ */
+const LANGUAGES = [
+	import("shiki/langs/bash.mjs"),
+	import("shiki/langs/javascript.mjs"),
+	import("shiki/langs/python.mjs"),
+	import("shiki/langs/java.mjs"),
+	import("shiki/langs/csharp.mjs"),
+	import("shiki/langs/php.mjs"),
+	import("shiki/langs/ruby.mjs"),
+	import("shiki/langs/go.mjs"),
+	import("shiki/langs/swift.mjs"),
+	import("shiki/langs/kotlin.mjs"),
+	import("shiki/langs/dart.mjs"),
+	import("shiki/langs/rust.mjs"),
+	import("shiki/langs/json.mjs"),
+]
+
+/**
+ * Theme used throughout the application.
+ */
+const THEME = import("shiki/themes/solarized-dark.mjs")
+
+/**
+ * Singleton highlighter instance promise.
+ * Creating a highlighter is expensive, so we cache it.
+ */
+let highlighterPromise: Promise<HighlighterCore> | null = null
+
+/**
+ * Gets or creates the singleton highlighter instance.
+ * Uses the JavaScript RegExp engine for smaller bundle size (no WASM).
+ * @returns Promise resolving to the highlighter instance
+ */
+export async function getHighlighter(): Promise<HighlighterCore> {
+	if (!highlighterPromise) {
+		highlighterPromise = createHighlighterCore({
+			themes: [THEME],
+			langs: LANGUAGES,
+			engine: createJavaScriptRegexEngine(),
+		})
+	}
+	return highlighterPromise
+}
+
+/**
+ * Highlights code and returns HTML string.
+ * @param code - The code to highlight
+ * @param lang - The language identifier (e.g., 'javascript', 'python')
+ * @returns Promise resolving to highlighted HTML string
+ */
+export async function highlightCode(
+	code: string,
+	lang: string,
+): Promise<string> {
+	const highlighter = await getHighlighter()
+	return highlighter.codeToHtml(code, {
+		lang,
+		theme: "solarized-dark",
+	})
+}
+
+/**
+ * Disposes the highlighter instance to free resources.
+ * Call this when the highlighter is no longer needed.
+ */
+export function disposeHighlighter(): void {
+	if (highlighterPromise) {
+		highlighterPromise.then((h) => h.dispose())
+		highlighterPromise = null
+	}
+}