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;
+};