chore: refactor react-syntax-highlither to handle dark themes (#34028)

superset-frontend/src/SqlLab/components/ShowSQL/index.tsx

@@ -16,13 +16,12 @@
  * specific language governing permissions and limitations
  * under the License.
  */
-import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light';
-import sql from 'react-syntax-highlighter/dist/cjs/languages/hljs/sql';
-import github from 'react-syntax-highlighter/dist/cjs/styles/hljs/github';
+import { useEffect } from 'react';
 import { IconTooltip, ModalTrigger } from '@superset-ui/core/components';
 import { Icons } from '@superset-ui/core/components/Icons';
-
-SyntaxHighlighter.registerLanguage('sql', sql);
+import CodeSyntaxHighlighter, {
+  preloadLanguages,
+} from '@superset-ui/core/components/CodeSyntaxHighlighter';
 
 interface ShowSQLProps {
   sql: string;
@@ -37,6 +36,11 @@ export default function ShowSQL({
   sql: sqlString,
   triggerNode,
 }: ShowSQLProps) {
+  // Preload SQL language since this component will definitely use it when modal opens
+  useEffect(() => {
+    preloadLanguages(['sql']);
+  }, []);
+
   return (
     <ModalTrigger
       modalTitle={title}
@@ -49,9 +53,9 @@ export default function ShowSQL({
       }
       modalBody={
         <div>
-          <SyntaxHighlighter language="sql" style={github}>
+          <CodeSyntaxHighlighter language="sql">
             {sqlString}
-          </SyntaxHighlighter>
+          </CodeSyntaxHighlighter>
         </div>
       }
     />