diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter-types.ts b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter-types.ts
index b2c5ee2d39ee..287b37b4bcb7 100644
--- a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter-types.ts
+++ b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter-types.ts
@@ -1,5 +1,6 @@
 import type { BuiltInParserName } from 'prettier';
 import type { ReactNode } from 'react';
+import type { supportedLanguages } from './syntaxhighlighter';
 
 export interface SyntaxHighlighterRendererProps {
   rows: any[];
@@ -30,7 +31,7 @@ export interface SyntaxHighlighterBaseProps {
   children?: React.ReactNode;
   codeTagProps?: React.HTMLProps<HTMLElement>;
   customStyle?: any;
-  language?: string;
+  language?: keyof typeof supportedLanguages;
   lineNumberStyle?: any;
   lineProps?: LineTagPropsFunction | React.HTMLProps<HTMLElement>;
   showLineNumbers?: boolean;
diff --git a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx
index 4a84d4bda34f..e0c0f869a370 100644
--- a/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx
+++ b/code/ui/components/src/syntaxhighlighter/syntaxhighlighter.tsx
@@ -33,17 +33,23 @@ import type {
 
 const { navigator, document, window: globalWindow } = global;
 
-ReactSyntaxHighlighter.registerLanguage('jsextra', jsExtras);
-ReactSyntaxHighlighter.registerLanguage('jsx', jsx);
-ReactSyntaxHighlighter.registerLanguage('json', json);
-ReactSyntaxHighlighter.registerLanguage('yml', yml);
-ReactSyntaxHighlighter.registerLanguage('md', md);
-ReactSyntaxHighlighter.registerLanguage('bash', bash);
-ReactSyntaxHighlighter.registerLanguage('css', css);
-ReactSyntaxHighlighter.registerLanguage('html', html);
-ReactSyntaxHighlighter.registerLanguage('tsx', tsx);
-ReactSyntaxHighlighter.registerLanguage('typescript', typescript);
-ReactSyntaxHighlighter.registerLanguage('graphql', graphql);
+export const supportedLanguages = {
+  jsextra: jsExtras,
+  jsx,
+  json,
+  yml,
+  md,
+  bash,
+  css,
+  html,
+  tsx,
+  typescript,
+  graphql,
+};
+
+Object.entries(supportedLanguages).forEach(([key, val]) => {
+  ReactSyntaxHighlighter.registerLanguage(key, val);
+});
 
 const themedSyntax = memoize(2)((theme) =>
   Object.entries(theme.code || {}).reduce((acc, [key, val]) => ({ ...acc, [`* .${key}`]: val }), {})