+ No Line Wrapping
+
+ {`SELECT very_long_column_name, another_very_long_column_name, yet_another_extremely_long_column_name FROM very_long_table_name WHERE condition = 'this is a very long condition';`}
+
+
+
+);
+
+// Performance and edge cases
+export const EdgeCases = () => (
+
+ {/* Very long single line */}
+
+ Very Long Single Line
+
+ {`SELECT ${'very_long_column_name, '.repeat(20)}id FROM users;`}
+
+
+
+ {/* Special characters */}
+
+ Special Characters & Escaping
+
+ {`SELECT * FROM "table-name" WHERE field = 'O\\'Brien' AND data = '{"key": "value"}';`}
+
+
+ ))}
+
+
+);
diff --git a/superset-frontend/packages/superset-ui-core/src/components/CodeSyntaxHighlighter/index.test.tsx b/superset-frontend/packages/superset-ui-core/src/components/CodeSyntaxHighlighter/index.test.tsx
new file mode 100644
index 00000000000..f4c04a90069
--- /dev/null
+++ b/superset-frontend/packages/superset-ui-core/src/components/CodeSyntaxHighlighter/index.test.tsx
@@ -0,0 +1,156 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { render, screen } from '../../spec';
+import CodeSyntaxHighlighter from './index';
+
+// Simple mock that just returns the content
+jest.mock(
+ 'react-syntax-highlighter/dist/cjs/light',
+ () =>
+ function MockSyntaxHighlighter({ children, ...props }: any) {
+ return (
+
+ {children}
+
+ );
+ },
+);
+
+// Mock the language modules
+jest.mock(
+ 'react-syntax-highlighter/dist/cjs/languages/hljs/sql',
+ () => 'sql-mock',
+);
+jest.mock(
+ 'react-syntax-highlighter/dist/cjs/languages/hljs/json',
+ () => 'json-mock',
+);
+jest.mock(
+ 'react-syntax-highlighter/dist/cjs/languages/hljs/htmlbars',
+ () => 'html-mock',
+);
+jest.mock(
+ 'react-syntax-highlighter/dist/cjs/languages/hljs/markdown',
+ () => 'md-mock',
+);
+
+// Mock the styles
+jest.mock('react-syntax-highlighter/dist/cjs/styles/hljs/github', () => ({}));
+jest.mock(
+ 'react-syntax-highlighter/dist/cjs/styles/hljs/atom-one-dark',
+ () => ({}),
+);
+
+describe('CodeSyntaxHighlighter', () => {
+ it('renders code content', () => {
+ render(SELECT * FROM users;);
+
+ expect(screen.getByText('SELECT * FROM users;')).toBeInTheDocument();
+ });
+
+ it('renders with default SQL language', () => {
+ render(SELECT * FROM users;);
+
+ // Should show content (the important thing is content is visible)
+ expect(screen.getByText('SELECT * FROM users;')).toBeInTheDocument();
+ });
+
+ it('renders with specified language', () => {
+ render(
+
+ {`{ "key": "value" }`}
+ ,
+ );
+
+ // Should show content regardless of which element renders it
+ expect(screen.getByText('{ "key": "value" }')).toBeInTheDocument();
+ });
+
+ it('supports all expected languages', () => {
+ const languages = ['sql', 'json', 'htmlbars', 'markdown'] as const;
+
+ languages.forEach(language => {
+ const { unmount } = render(
+
+ {`Test content for ${language}`}
+ ,
+ );
+
+ // Should render the content (either in fallback or syntax highlighter)
+ expect(
+ screen.getByText(`Test content for ${language}`),
+ ).toBeInTheDocument();
+
+ unmount();
+ });
+ });
+
+ it('renders fallback pre element initially', () => {
+ render(
+
+ SELECT COUNT(*) FROM table;
+ ,
+ );
+
+ // Should render the content in some form
+ expect(screen.getByText('SELECT COUNT(*) FROM table;')).toBeInTheDocument();
+ });
+
+ it('handles special characters', () => {
+ const specialContent = "SELECT * FROM `users` WHERE name = 'O\\'Brien';";
+
+ render(
+
+ {specialContent}
+ ,
+ );
+
+ expect(screen.getByText(specialContent)).toBeInTheDocument();
+ });
+
+ it('accepts custom styles', () => {
+ render(
+
+ SELECT * FROM users;
+ ,
+ );
+
+ expect(screen.getByText('SELECT * FROM users;')).toBeInTheDocument();
+ });
+
+ it('accepts showLineNumbers prop', () => {
+ render(
+
+ SELECT * FROM users;
+ ,
+ );
+
+ expect(screen.getByText('SELECT * FROM users;')).toBeInTheDocument();
+ });
+
+ it('accepts wrapLines prop', () => {
+ render(
+
+ SELECT * FROM users;
+ ,
+ );
+
+ expect(screen.getByText('SELECT * FROM users;')).toBeInTheDocument();
+ });
+});
diff --git a/superset-frontend/packages/superset-ui-core/src/components/CodeSyntaxHighlighter/index.tsx b/superset-frontend/packages/superset-ui-core/src/components/CodeSyntaxHighlighter/index.tsx
new file mode 100644
index 00000000000..b52ba362543
--- /dev/null
+++ b/superset-frontend/packages/superset-ui-core/src/components/CodeSyntaxHighlighter/index.tsx
@@ -0,0 +1,149 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one
+ * or more contributor license agreements. See the NOTICE file
+ * distributed with this work for additional information
+ * regarding copyright ownership. The ASF licenses this file
+ * to you under the Apache License, Version 2.0 (the
+ * "License"); you may not use this file except in compliance
+ * with the License. You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+import { useEffect, useState } from 'react';
+import SyntaxHighlighterBase from 'react-syntax-highlighter/dist/cjs/light';
+import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
+import tomorrow from 'react-syntax-highlighter/dist/cjs/styles/hljs/tomorrow-night';
+import { themeObject } from '@superset-ui/core';
+
+export type SupportedLanguage = 'sql' | 'htmlbars' | 'markdown' | 'json';
+
+export interface CodeSyntaxHighlighterProps {
+ children: string;
+ language?: SupportedLanguage;
+ customStyle?: React.CSSProperties;
+ showLineNumbers?: boolean;
+ wrapLines?: boolean;
+ style?: any; // Override theme style if needed
+}
+
+// Track which languages have been registered to avoid duplicate registrations
+const registeredLanguages = new Set();
+
+// Language import functions - these will be called lazily
+const languageImporters = {
+ sql: () => import('react-syntax-highlighter/dist/cjs/languages/hljs/sql'),
+ htmlbars: () =>
+ import('react-syntax-highlighter/dist/cjs/languages/hljs/htmlbars'),
+ markdown: () =>
+ import('react-syntax-highlighter/dist/cjs/languages/hljs/markdown'),
+ json: () => import('react-syntax-highlighter/dist/cjs/languages/hljs/json'),
+};
+
+/**
+ * Lazily register a language for syntax highlighting
+ */
+const registerLanguage = async (language: SupportedLanguage): Promise => {
+ if (registeredLanguages.has(language)) {
+ return; // Already registered
+ }
+
+ try {
+ const languageModule = await languageImporters[language]();
+ SyntaxHighlighterBase.registerLanguage(language, languageModule.default);
+ registeredLanguages.add(language);
+ } catch (error) {
+ console.warn(`Failed to load language ${language}:`, error);
+ }
+};
+
+/**
+ * A themed syntax highlighter component that automatically adapts to Superset's current theme.
+ * Supports light/dark mode switching and provides consistent styling across the application.
+ * Languages are loaded lazily to improve initial page load performance.
+ * Uses ultra-neutral themes for professional, consistent appearance.
+ */
+export const CodeSyntaxHighlighter: React.FC = ({
+ children,
+ language = 'sql',
+ customStyle = {},
+ showLineNumbers = false,
+ wrapLines = true,
+ style: overrideStyle,
+}) => {
+ const [isLanguageReady, setIsLanguageReady] = useState(
+ registeredLanguages.has(language),
+ );
+
+ useEffect(() => {
+ const loadLanguage = async () => {
+ if (!registeredLanguages.has(language)) {
+ await registerLanguage(language);
+ setIsLanguageReady(true);
+ }
+ };
+
+ loadLanguage();
+ }, [language]);
+
+ const isDark = themeObject.isThemeDark();
+ const themeStyle = overrideStyle || (isDark ? tomorrow : github);
+
+ const defaultCustomStyle: React.CSSProperties = {
+ background: themeObject.theme.colorBgElevated,
+ padding: themeObject.theme.sizeUnit * 4,
+ border: 0,
+ borderRadius: themeObject.theme.borderRadius,
+ ...customStyle,
+ };
+
+ // Show a simple pre-formatted text while language is loading
+ if (!isLanguageReady) {
+ return (
+