From 42b9f0f0e84ff079c1d157e961623dfc8a7a481c Mon Sep 17 00:00:00 2001
From: Nate Kelley <nate@buster.so>
Date: Mon, 28 Jul 2025 14:44:35 -0600
Subject: [PATCH] Create useCodeHighlighter.tsx

---
 .../SyntaxHighlight/useCodeHighlighter.tsx     | 18 ++++++++++++++++++
 1 file changed, 18 insertions(+)
 create mode 100644 apps/web/src/components/ui/typography/SyntaxHighlight/useCodeHighlighter.tsx

diff --git a/apps/web/src/components/ui/typography/SyntaxHighlight/useCodeHighlighter.tsx b/apps/web/src/components/ui/typography/SyntaxHighlight/useCodeHighlighter.tsx
new file mode 100644
index 000000000..af986f0ad
--- /dev/null
+++ b/apps/web/src/components/ui/typography/SyntaxHighlight/useCodeHighlighter.tsx
@@ -0,0 +1,18 @@
+import { useEffect, useState } from 'react';
+import { getHighlightedCode } from './shiki-instance';
+import { useAsyncEffect } from '@/hooks';
+
+export const useCodeHighlighter = (code: string, language: 'sql' | 'yaml') => {
+  const [highlightedCode, setHighlightedCode] = useState(code);
+
+  useAsyncEffect(async () => {
+    const highlighter = await getHighlightedCode(code, language, 'github-light');
+    setHighlightedCode(highlighter);
+
+    return () => {
+      //
+    };
+  }, [code, language]);
+
+  return highlightedCode;
+};